聊聊前端里的颜色渐变

fabritor 在最新版本支持了渐变色填充,可以让文字或背景实现更华丽的效果。在实践过程中发现渐变其实是一件挺有意思(很炫酷)的事情,接下来就展开聊聊前端里关于渐变的那些事。

CSS 渐变

作为前端,说到渐变,最先想到的就是 CSS 渐变了。不过印象中很少手写,一般切页面的时候也很少有这种效果,有也是直接复制 Sketch 导出的 CSS 🤪。

CSS 里的渐变有三类:线性渐变、径向渐变和锥形渐变。直接给丢一段语法和 DEMO 可能有点摸不着头脑。我们可以先看一下维基百科给出的渐变定义:

颜色渐变(有时也叫颜色带)是指一定范围的随之位置而变的颜色,通常用于填充某一个区域。渐变产生的颜色随位置连续变化,产生平滑的颜色过渡。

从概念上看,渐变主要由以下内容组成:

  1. 随位置变化的颜色,也叫做色标(color stop)。色标由两部分组成,一个是颜色,一个是颜色所在位置。如:blue 20% 或者 blue 20px
  2. 需要渐变色填充的区域,确定渐变的起点和终点,也就是色标前进的方向。

不论是哪种渐变,都是配置以上两部分,通常语法就是 xx-gradient(direction, color stop, color stop ...)。而各类渐变色标部分其实是一致的,那就只要区分确定渐变方向的参数就行了。

线性渐变

比如线性渐变,顾名思义,色标沿着一条直线前进。渐变方向是一条直线,就直接用角度确定渐变方向。

css 复制代码
.linear {
  background: linear-gradient(90deg, blue 0, pink 20%, green 100%);
}

上面代码定义了线性渐变,色标以 90deg 方向(从左到右)前进,依次从蓝色、粉色、绿色渐变,并且定义了每个颜色的位置。

效果如图:

在使用角度的时候,0deg 代表渐变方向为从下到上,90deg 代表渐变方向为从左到右,诸如此类正角度都属于顺时针方向。而负角度意味着逆时针方向。

前往 MDN 了解更多关于线性渐变的知识。

径向渐变

径向渐变,色标以圆或者椭圆前进。要确定渐变方向,只需要确定圆或者椭圆的的中心即可。

css 复制代码
.radial {
  background: radial-gradient(circle at 50% 50%, blue 0, pink 40%, green 100%);
}

上面代码定义了径向渐变,圆心在元素的中心。

前往 MDN 了解更多关于径向渐变的知识。

锥形渐变

锥形渐变,色标围绕着中心点旋转,每个色标的区域类似一个扇形。和径向渐变一样,需要确定一个中心点。另外,因为是围绕着中心点旋转,还需要确定一个其实旋转角度。

css 复制代码
.conic {
  background: conic-gradient(
    from 45deg at 50% 30%,
    blue 0,
    pink 40%,
    green 100%
  );
}

上面代码定义了锥形渐变,中心在元素的 50% 30% 处,从 45deg 开始旋转。

前往 MDN 了解更多关于锥锥形渐变的知识。

更多

CSS 渐变除了单一的设置渐变,还支持更高级的渐变设置,比如可以将多个渐变堆叠起来:

css 复制代码
.stacked-linear {
  background: linear-gradient(
      217deg,
      rgba(255, 0, 0, 0.8),
      rgba(255, 0, 0, 0) 70.71%
    ), linear-gradient(127deg, rgba(0, 255, 0, 0.8), rgba(0, 255, 0, 0) 70.71%),
    linear-gradient(336deg, rgba(0, 0, 255, 0.8), rgba(0, 0, 255, 0) 70.71%);
}

更多效果可以前往 MDN 查看。

CSS 渐变的能力十分强大,关键看有没有创意了。🤔

Canvas 渐变

canvas 也是支持渐变色的,支持线性渐变和径向渐变。

Canvas

线性渐变 createLinearGradient(x1, y1, x2, y2),和 CSS 线性渐变使用角度确定方向不同,四个参数分别表示渐变的起点 (x1,y1) 与终点 (x2,y2)。

js 复制代码
const lineargradient = ctx.createLinearGradient(0, 0, 150, 150);

径向渐变 createRadialGradient(x1, y1, r1, x2, y2, r2),六个参数分别确定渐变的内圆坐标(x1,y1),内圆半径(r1)以及外圆坐标(x2,y2),外圆半径(r2)。

js 复制代码
const radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);

确定渐变区域和方向后,就可以给渐变添加色标了:

js 复制代码
lineargradient.addColorStop(0, "white");
lineargradient.addColorStop(1, "black");

fabric.js

fabritor 内的渐变基于 fabric.js 实现。

fabric.js 的渐变也就是封装了 Canvas 渐变 API,源码位置github.com/fabricjs/fa...

js 复制代码
// 代码片段
var gradient;

if (this.type === 'linear') {
  gradient = ctx.createLinearGradient(
    coords.x1, coords.y1, coords.x2, coords.y2);
}
else if (this.type === 'radial') {
  gradient = ctx.createRadialGradient(
    coords.x1, coords.y1, coords.r1, coords.x2, coords.y2, coords.r2);
}

for (i = 0, len = this.colorStops.length; i < len; i++) {
  var color = this.colorStops[i].color,
      opacity = this.colorStops[i].opacity,
      offset = this.colorStops[i].offset;
  }
  gradient.addColorStop(offset, color);
}

return gradient;

canvas 的渐变色同时支持赋值给 stroke 和 fill 属性:

CSS 文字渐变

不知道你发现了没有,canvas 内是用 fill 属性表示填充,所以不论是形状还是文字,都可以应用渐变色。而 CSS 渐变一般我们用在 background 或者 background-image 属性内,也就是一般用到背景内,文字颜色是用 color 属性设置的,我尝试给 color 属性设置渐变,并不会生效。

那 CSS 要给文字设置渐变色,要怎么做呢?

这里看到一篇文章,How to add a gradient overlay to text with CSS,里面给了一种设置文字渐变色的方法。

css 复制代码
background-size: 100%;
background-repeat: repeat;
background-clip: text;
color: transparent;
background-image: linear-gradient(45deg, #f3ec78, #af4261);

关键属性就是 background-clip,设置为 text,将背景裁剪成文字的前景色,这里我们又将文字设置为透明,文字就展示为渐变色了。

作者后面还给出几个更加炫酷的案例,可以前往原文查看。How to add a gradient overlay to text with CSS

SVG 渐变

SVG 现在用的越来越多了,大多数图标库都直接提供 SVG 图标了。那如何在 SVG 实现渐变呢,首先想到的就是 SVG 是有 fill 属性的,但很遗憾,直接给fill 属性设置 CSS 渐变也是不生效的,SVG 有自己的渐变语法。

SVG 设置渐变首先需要一段渐变 SVG😂:

html 复制代码
<svg style="width:0;height:0;position:absolute;" aria-hidden="true" focusable="false">
  <linearGradient id="my-cool-gradient" x1="0" y1="0" x2="1" y2="1">
    <stop offset="0%" stop-color="#447799" />
    <stop offset="50%" stop-color="#224488" />
    <stop offset="100%" stop-color="#112266" />
  </linearGradient>
</svg>

你会发现,除了语法不一样,和 canvas 里简直是一一对应的。

这时候将 linearGradient 标签对应的 id 赋值给 svg fill 属性即可。

可以 css 设置:

css 复制代码
.icon-sprite-gradient {
  fill: url(sprite.svg#my-cool-gradient) red;
}

也可以直接内联 fill 属性设置:

html 复制代码
<svg class="icon" fill="url(#my-cool-gradient) #447799;" aria-hidden="true" focusable="false">
  <use xlink:href="#symbol-id"></use>
</svg>

径向渐变语法也和 canvas 一致,这里不再展开,依然可以去 MDN 查看。

如果你体验过 fabritor,你会发现,文字设置渐变色之后,工具栏的图标也跟随展示为渐变色,就是是用了上述方式实现的。

另外 fabric.js 里,渐变类有个 toSVG 的方法,将 canvas 渐变转换为 svg 渐变。

渐变色选择器:react colors beauty

最后,推荐一下我开发的渐变色选择器,同时支持纯色和渐变色选择(支持色标、线性渐变角度配置),已经在 fabritor 上使用了!

如果你的项目也需要一个渐变色选择器,不妨试一下!

相关推荐
别拿曾经看以后~8 分钟前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死11 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试14 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人23 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人23 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR29 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香31 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969334 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai39 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc43 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter