Colorful is back!
2020-04-29 / CHINQ / / 4 min. read

清明过了,彩色回来了!

如何设置彩色字体呢?而且是那种多种颜色渐变的哦

开始jio学👇

给文字设置一个class

如:

<p class="colorful-text">我是一个P标签</p>

然后将这个class设置style

Style:

<style>
.colorful-text {
            color: transparent;
            background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
            background-size: 125%;
            -webkit-background-clip: text;
            background-clip: text;
        }
</style>

在 background: linear-gradient 里设置要渐变的颜色

那这么好看的渐变颜色要从哪里找呢

这里给几个渐变色网站👇

CoolHue

CoolHue 首页大概有 60 种渐变色背景,当然,这个数目会持续增加。选择你中意的配色方案,点击下载即可获得一张适当分辨率的方形 PNG 图片。点击代码图标,可以复制该渐变色的 CSS3 语法。在一些网页设计中,直接应用,相比上传渐变色图片,更省流量。下方可以直接复制 16 进制代码,用于 PPT 或者 PS ,甚至电脑画图程序当中

Uigradients

Uigradients 也是一款简单的配色网站。点击左上角的菜单,即可显示所有内容。通过不同颜色选择不同配色。点击右上角的方向箭头,可以旋转配色角度;点击代码按钮,可以复制它的 Css 代码,用于其他设计。点击下载按钮,即可获得一张足够分辨率的 JPG 图片。当然,你还可以直接点击顶部的色值,复制 16 进制色值

Webgradients

Webgradients 大概拥有 180 种渐变配色,在首页点击色块即可全屏显示当前配色方案;同样,在底部可以复制 16 进制色值以及 CSS 代码,点击色块右上角,即可下载 PNG 格式图片

Gradients of Shapefactory

Gradients of Shapefactory 其实是整个网站的功能之一,其他功能你可以自行去发掘。整个界面显示当前色系的不同渐变颜色;点击色盘,更改色系。拖动左边的球形按钮,可以改变色度和亮度;鼠标放在某一色块上,点击圆圈并旋转拖动可以改变渐变色的角度。同样可以复制 16 进制色值,以及 CSS 代码;点击图片,可以看到全局

设置好了就会看到超漂漂的字体了哦,这里给一个样子

Bye~

😀
本文链接:
https://www.cqbg.ga/2020/04/29/Colorful-is-back/