CSS3 text-shadow介绍

21 Sep

对页面来说文字就是灵魂,因此美化文字的工作必不可少。除了加载漂亮的字体外,还可以用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效果仍旧很普遍,凸起的文字能体现出立体感。

text-shadow

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效果更加逼真。

顺着这个思路还可以将底部黑色阴影去掉,背景换一个色彩,设计出复古风:

text-shadow

.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效果,不设偏移量,只设阴影半径可以模拟高亮文字效果:

text-shadow

.glow {
    padding: .25em;
    background: #203;
    text-shadow: 0 0 .1em,
                 0 0 .2em;
} 

<p class="glow">Hollywood</p>

凹陷效果的文字会产生一种石刻字的效果。实现方法:先给文字和背景色使用相同的色相和饱和度,但亮度不同。背景色的亮度高,产生浅色效果,文字的亮度低,产生暗色效果。原理是生活中光源总是在我们头上,所以凹陷进去部分接触到的光源偏少会呈现暗色。接着给文字加上白色投影来打亮边缘,使凹陷效果更逼真。

text-shadow

.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>

将上例文字和背景色的亮度值互换,再将亮边缘投影变暗,就能呈现凸起文字的效果。

text-shadow

.projections {
    padding: .25em;
    background: hsl(210, 13%, 30%);
    color: hsl(210, 13%, 60%);
    text-shadow: 0 -1px 1px black;
}

<p class="projections">Rosetta</p>

Leave a Reply

Your email address will not be published. Required fields are marked *