CSS 实现文字颜色渐变

Clloz · · 3,314次浏览 ·

前言

我经常将自己的一些突发奇想的设计到自己的博客上尝试。博客首页右侧的热门文章的小工具上的文本颜色一直没找到满意的,于是想试试渐变色的文本会不会有不错的效果。

文本渐变色实现

background-clip

这种实现的主要思路就是对 background 进行裁剪。background-clip 提供了一个 text 属性,可以将背景裁剪成文本的前景色(即只有文本覆盖的部分有背景色),然后我们再将文本颜色设置为 transparent 即可以实现文本颜色的渐变。background-cliptext 属性目前仍然是实验功能,需要使用 -webkit-background-clip 才能生效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>text-color-gradient</title>
        <style>
            .text-color-gradient {
                display: inline-block;
                font-size: 10em;
                font-weight: 700;
                background: linear-gradient(0.25turn, #c21500, #ffc500);
                background-clip: text;
                -webkit-background-clip: text;
                color: transparent;
            }
        </style>
    </head>
    <body>
        <div style="text-align: center;">
            <div class="text-color-gradient">
                Clloz
            </div>
        </div>
    </body>
</html>

mask-image

第二种方法是使用 mask-image 配合伪元素做一个渐变遮罩层。如果我们的渐变是 color Acolor B,我们可以将文本颜色设为 A,然后用伪元素(content 与元素文本相同)配合 mask-image 做一个渐变的遮罩层,渐变是从 transparentcolor B,然后我们将伪元素覆盖到原来的文本上,就能得到想要的渐变。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>text-color-gradient</title>
        <style>
            .text-color-gradient {
                display: inline-block;
                font-size: 10em;
                position: relative;
                color: #ffc500;
            }

            .text-color-gradient[data-text]::after {
                content: attr(data-text);
                color: #c21500;
                position: absolute;
                left: 0;
                z-index: 2;
                -webkit-mask-image: linear-gradient(0.25turn, #c21500, transparent);
            }
        </style>
    </head>
    <body>
        <div style="text-align: center;">
            <div class="text-color-gradient" data-text="Clloz">
                Clloz
            </div>
        </div>
    </body>
</html>

关于渐变色

关于渐变色推荐一个网站:uigradients,该网站有很多不错的渐变色搭配。另外还有一个软件aquarelo,可以查看渐变色,也支持导出。

总结

这就是我实现渐变的两种方法,总的来说还是第一种方法比较简单好用,并且可以设置两种以上颜色的渐变。mask-imagelinear-gradient 取值似乎必须要一个 transparent ,并且只能有两个颜色。综合而言还是使用第一个方式比较好。

参考文章

  1. CSS3下的渐变文字效果实现

Clloz

人生をやり直す

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*

 

00:00/00:00