希沃ENOW大前端
公司官网:CVTE(广州视源股份)
团队:CVTE旗下未来教育希沃软件平台中心enow团队
「本文作者:」
前言
本人前端小白一枚,最近在做文本的艺术字效果,里面用到了很多css的属性来实现的文字效果,期间也遇到一些坑,借此机会做一次总结,希望对大家有所帮助。
文字效果
常见文字效果分以下6种,接下来分别给大家介绍一下如何实现:
1、填充效果
常见的填充效果有渐变填充和图片填充,效果如下图:
「」
以上填充效果可以通过 background-clip: text
来实现,使用这个属性的意思是:以区块内的文字作为裁剪区域向外裁剪,文字的背景即为区块的背景,文字之外的区域都将被裁剪掉,即区块内的背景会被裁剪成文字的前景色。
为了达到文字填充效果,我们必须同时设置Color属性为透明,同时background-clip:text
只在webkit内核浏览器才支持,因此需设置如下:
{
-webkit-background-clip: text;
color: transparent;
}
渐变填充效果背景图片(background-image)使用linear-gradient()函数,比如上图渐变填充css代码如下:
图片填充效果背景图片也比较简单,不过如果要实现纹理效果,注意要同时设置background-repeat:repeat
,比如上图的图片填充css代码如下:
在Safari浏览器兼容性测试时,我们发现两个坑,在此特别提醒大家:
1、使用flex,child元素构造文本的方式,填充效果显示不正常:
2、不使用flex,child元素构造文本的方式,填充效果显示不正常:
最后验证发现不使用flex,inline Text的的方式,显示才正常: 所以在「Safari浏览器下:使用backgroundClip:text属性时,元素不使用display:flex,元素内部inline文本」
2、描边效果
我们常看到的文字描边效果如下:
要实现文字描边效果,我们可以使用css提供的文字描边属性text-stroke
, text-stroke
属性的语法并不复杂,它仅仅是这两个CSS属性合体:text-stroke-width
和text-stroke-color
,也就是描边的宽度和描边的颜色。
简单示意:
{
-webkit-text-stroke: 2px red;
}
经过验证发现,text-stroke采用的是居中描边特性,这样的话会让真实文本的字重削弱了,因为会一半的描边宽度会盖住文本区域,为了不削弱文字的字重,「我们想到了两个dom元素叠加的方法:第一个元素设置描边效果,第二个元素设置跟第一个元素一样的前景色,盖住底层元素的内描边。」 例如上图的实现如下:
3、阴影效果
阴影效果应该是最常见的文字效果了,比如下面的效果:
text-shadow
可以为文字添加阴影。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。另外阴影效果还支持叠加,每隔叠加的阴影用逗号分隔,具体设置如下图:
4、发光效果
发光效果实际是一种特殊的阴影效果,如下图所示:
要实现发光效果,「只需」text-shadow
「在X、Y方向的偏移量为0,发光颜色值就是阴影的颜色值」,这样就可以看起来像在文字周围有发光效果。比如上图的发光样式设置如下:
5、透视效果
我们通常看到的透视效果是这样的:
通过上图可以发现,我们可以用transform
属性来实现透视效果,先沿X轴方向扭曲变换(skew),然后再沿Y轴方向进行缩放(scaleY),变换原点(transform-origin
)为元素右下角位置,但是为了变换之后保持与文本底部对齐,所以变换原点坐标Y值为文本基线处位置。
基线位置是如何计算的呢,我们使用SVGTextElement的getBBox()
方法,具体的为:
baseline = Math.abs(getBBox().y)
关于文本基线的相关知识这里不展开,大家可以猛戳此处查看。
另外还有一个地方需要注意:transform
属性会直接修改到原有元素,因此需要单独使用一个dom元素做透视效果,这个dom元素在原有元素层级之下,比如上图的透视效果代码如下:
具体css的代码如下:
.transform {
transform: skew(60deg, 0deg) scaleY(0.3);
filter: blur(1px);
transform-origin: 150.469px 41.8711px;
}
其中filter用来做透视效果模糊处理,传入参数为模糊半径。
6、倒影效果
我们常看到的倒影效果如下图:
我们可以使用css的-webkit-box-reflect
属性,配合渐变画刷就可以实现倒影效果了,其中-webkit-box-reflect
属性语法如下:
-webkit-box-reflect: [ above | below | right | left ]? <length>? <image>?
它主要由三个参数组成:
- 方位:倒影朝向(above | below | right | left)
- 偏移大小:倒影与原始元素之间的距离
- 遮罩图片:对元素倒影的遮罩控制。语法类似于background-image。
如果遮罩图片用的是渐变画刷,要注意渐变方向的设置,因为是倒影所以参数是反的。 比如上图的倒影效果的代码如下:
{
color: rgb(237, 125, 49);
-webkit-box-reflect: below -13.8438px linear-gradient(rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.13) 40%, rgb(255, 255, 255));
}
最后
相信大家看完以上的介绍之后,应该对文字效果如何实现有所了解了,其实很多文字效果并不是单一效果来实现,通常都会由几种效果组合来完成的,比如下面的这个效果: 它是由描边、填充、透视效果叠加之后的一个效果,为了保证最佳效果,大家要注意管理好各个效果的层级,比如上图,透视效果层级是最低的,填充效果是最高的。 这篇文章只是给大家简单介绍了一些常用的文字效果实现,在实际应用中需要给不同字号的文本设置效果,这时有些效果(透视、倒影)就需要考虑文字效果的基线对齐了,比如下面的效果: 如何做基线对齐呢,因时间关系,我们下次再开讲,感谢大家的阅读~~