从展示的效果可以猜到这个效果由3层文字组成。
要实现多层文字,我首先想到的是文字投影 text-shadow ,但通常 text-shadow 只能投个纯色出来。
于是思路要改一下,黑色和白色层是投影,斑马条纹是真正的文字本身。
看到这种条纹效果,我想到了背景图渐变。
第一种思路不推荐,因为作为一个有追求的前端能不使用图片就尽量别使用图片!
渐变纹路的想法确定后,就可以使用 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);
这句话的意思就是:
使用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呈现效果,区块投影、文字投影各有各的妙用!!!
*请认真填写需求信息,我们会在24小时内与您取得联系。