如何用低代码的思路设计文字描边渐变组件

前言

文字特效设计一直是困扰 Web 前端 Css 世界多年的问题, 比如如何用纯 Css 实现文字描边, 渐变, 阴影等, 由于受限于浏览器兼容性的问题, 我们不得不使用其他替代方案来实现.

平时工作中我们使用 PS 等设计工具能很容易的实现文字渐变等特效, 但是随着可视化技术的成熟, 我们需要把传统软件的能力移植到 web 端, 让用户在 Web 端也能有和桌面软件一样的体验效果, 那么我们就需要想一套优雅的方案了, 接下来我会从文本特效的

• 描边

• 阴影

• 渐变

这3个纬度来和大家分享一下用前端实现的解决方案, 并提供一种可复用的文本组件设计方案, 让大家更容易的来是使用文字特效.

你将收获

• 文字渐变, 阴影, 描边的3种方案实现

• 组件设计的一些通用方法和原则

• 如果在低代码平台中优雅的设计功能强大的文字组件

• 技术脑洞

正文

先来介绍一下文字描边和阴影的设计方案.

文字描边的2种css方案

1. css3 的 text-stroke

我们可以使用如下样式来实现简单的描边效果:

-webkit-text-stroke: 1px #000000;

在w3c上演示的效果如下:

但是缺点就是兼容性不是特别好, 如果不考虑太多浏览器的兼容问题, 大家可以直接用这种方案.

1. 使用text-shadow 模仿描边效果

使用此方案有点就是兼容性好, 不需要加浏览器前缀,  方案如下:

.text-shadow {
  text-shadow: #000 1px 0 0, #000 0 1px 0, #000 -1px 0 0, #000 0 -1px 0;
  color: #fff;
}

显示效果:

刚才介绍的文字描边引用了阴影来实现,  自然我们要想实现文字阴影, 可以直接使用text-shadow, 并且我们可以实现多种阴影的效果, 甚至能用它实现3D文字效果(并不建议这么做, 性能有待考量)

实现文字渐变的3种方案

文字渐变css3也提供了对应的特性, 但是兼容性并不是很好, 目前还不推荐使用, 有如下2种方案:

// 方案1. 背景裁切+背景渐变实现
{
  background-image: -webkit-gradient(linear, left center, right center, from(blue), to(red)); /* 背景色渐变 */
 -webkit-background-clip: text;  /* 设置背景的显示区域 */
 -webkit-text-fill-color: transparent; /* 避免字体颜色覆盖 */
}

// 方案2: mask
{
  -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 b