对页面来说文字就是灵魂,因此美化文字的工作必不可少。除了加载漂亮的字体外,还可以用text-shadow文本阴影给枯燥的文字增加美感。
按例先看一下基本参数:
x-offset / y-offset:必须的参数。水平和垂直阴影的偏移量。正值表示往x轴y轴正方向偏移(即往右往下)。负值反过来往x轴y轴反方向偏移(即往左往上)。
blur-radius:阴影模糊半径。该参数可选,默认值为0表示不模糊,值越大,阴影的边缘就越模糊。值不能为负数。
color:阴影颜色。该参数可选,不设就取浏览器的默认色。因为各浏览器的默认色不同,推荐还是设一下,设一下又不会怀孕。
完整的语法box-shadow: [x-offset y-offset blur-radius color]+ 熟悉正则表达式的能看懂后面+号表示可以设多个阴影。参数比较简单,是box-shadow的子集,权威请参照W3C。我们举几个例子来试试美化文字。
虽然现在流行扁平化,但拟物化的3D效果仍旧很普遍,凸起的文字能体现出立体感。
body { font: 4em/1 Rockwell,"微软雅黑",serif; color: white; } .font3d { padding: .25em; background: #58a; text-shadow: 0 1px hsl(0,0%,85%), 0 2px hsl(0,0%,80%), 0 3px hsl(0,0%,75%), 0 4px hsl(0,0%,70%), 0 5px hsl(0,0%,65%), 0 5px 10px black; } <p class="font3d">CSS3D</p>
代码中文本阴影以Y轴往下1px为单位逐渐变淡,使扁平化的文字显示出3D的效果。最后底部加一次外扩10px的黑色阴影,使3D效果更加逼真。
顺着这个思路还可以将底部黑色阴影去掉,背景换一个色彩,设计出复古风:
.oldStyle { padding: .25em; background: hsl(0, 50%, 45%); text-shadow: 1px 1px black, 2px 2px black, 3px 3px black, 4px 4px black, 5px 5px black, 6px 6px black, 7px 7px black, 8px 8px black; } <p class="oldStyle">Rock & Roll</p>
设x-offset / y-offset能出现3D效果,不设偏移量,只设阴影半径可以模拟高亮文字效果:
.glow { padding: .25em; background: #203; text-shadow: 0 0 .1em, 0 0 .2em; } <p class="glow">Hollywood</p>
凹陷效果的文字会产生一种石刻字的效果。实现方法:先给文字和背景色使用相同的色相和饱和度,但亮度不同。背景色的亮度高,产生浅色效果,文字的亮度低,产生暗色效果。原理是生活中光源总是在我们头上,所以凹陷进去部分接触到的光源偏少会呈现暗色。接着给文字加上白色投影来打亮边缘,使凹陷效果更逼真。
.depressed { padding: .25em; background: hsl(210, 13%, 60%); color: hsl(210, 13%, 30%); text-shadow: 0 1px 1px hsla(0,0%,100%,.8); } <p class="depressed">Rosetta</p>
将上例文字和背景色的亮度值互换,再将亮边缘投影变暗,就能呈现凸起文字的效果。
.projections { padding: .25em; background: hsl(210, 13%, 30%); color: hsl(210, 13%, 60%); text-shadow: 0 -1px 1px black; } <p class="projections">Rosetta</p>