整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

纯CSS实现斑马纹理投影文字

果展示


思路分析

层级思路

从展示的效果可以猜到这个效果由3层文字组成。

  • 表面一层黑色文字
  • 中间一层白色文字
  • 最低的一层是斑马条纹文字

要实现多层文字,我首先想到的是文字投影 text-shadow ,但通常 text-shadow 只能投个纯色出来。

于是思路要改一下,黑色和白色层是投影,斑马条纹是真正的文字本身


斑马纹思路

看到这种条纹效果,我想到了背景图渐变。

  1. 直接使用图片实现斑马纹路
  2. 使用 background-image 里的线性渐变 linear-gradient

第一种思路不推荐,因为作为一个有追求的前端能不使用图片就尽量别使用图片!

渐变纹路的想法确定后,就可以使用 background-clip: text 规定背景图案渲染到文本中。

这个方法经常用来做文字特效。

要将背景渲染到文本中还需要把文字原本的颜色设置成透明,这样才能把背景图案显示出来。

color: transparent;
-webkit-text-fill-color: transparent;

-webkit-text-fill-color 是用来指定文字填充颜色,如果同时出现 -webkit-text-fill-color 和 color,-webkit-text-fill-color 将覆盖 color 的颜色。

但 -webkit-text-fill-color 并不是标准属性,这里之所以这样写,是因为怕 color 被其他更高权重的规则覆盖了。


编码

多数人使用box-shadow的方法是,指定三个长度值和一个颜色值

box-shadow: 2px 3px 4px rgba(0,0,0, .5);

这句话的意思就是:

  1. 以该元素相同的尺寸和位置,画一个rgba(0,0,0, .5)的矩形.
  2. 把它右移2px,向下移3px
  3. 使用高斯模糊算法或类似算法将它进行4px的模糊处理.这在本质上表示在阴影边缘发生阴影色和纯透明色之间的颜色过度,近似于模糊半径的两倍,比如在这里就是8px.
  4. 接下来,模糊后的矩形与原始元素的交集部分会被切除掉,因此它看起来像是在该元素的后面.

使用4px的模糊半径意味着投影的尺寸会比元素本身的尺寸大约8px(上下左右各4px),因此投影的最外圈会从元素外显露出来.所以我们只需要改变偏移量,就可以把投影的顶部和左侧隐藏起来,只要这两个方向上的偏移量不小于4px就可以。

box-shadow: 5px 5px 4px rgba(0,0,0, .5);

但是这样的话,在某种程度上会导致外露的投影太过浓重,看起来不美观。

另外就算勉强可以接受,我们想要的是单侧投影,而不是相邻的两侧。

最终的解决方案是box-shadow的第四个长度参数,它是扩张半径:

这个参数会根据你指定的值去扩大或(当指定负值时)缩小投影的尺寸。

举例来说,一个-5px的扩张半径会把投影的宽度和高度缩小10px - 每边各5px。因此如下时,完全没有投影:

box-shadow: 0px 0px 4px -4px rgba(0,0,0, .5);

所以,此时给投影一个正的垂直偏移量就会产生单侧投影:

box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5);

如果把单侧投影的方式运用两次就会得到双侧投影:

      box-shadow: 0px 5px 4px -4px rgba(0,0,0, .5),
                  0px -5px 4px -4px rgba(0,0,0, .5);

最后是实验的全部代码

影经常出现在设计师的设计稿中,web想要实现投影效果必须借助图片,图片的大小尺寸、自适应问题的存在,使得整个投影很“尴尬”,shadow属性可以很好的还原投影效果,利用投影可以大大提高web呈现效果,区块投影、文字投影各有各的妙用!!!