CSS 揭秘(5)--文字效果(使用 text-shadow)

Posted by liveipool on February 8, 2017

文字效果(使用 text-shadow)

text-shadow

  • text-shadow 属性向文本设置阴影。
  • text-shadow: h-shadow v-shadow blur color;
  • h-shadow 必需。水平阴影的位置。允许负值。
  • v-shadow 必需。垂直阴影的位置。允许负值。
  • blur 可选。模糊的距离。
  • color 可选。阴影的颜色。

凹凸效果

出现在底部的浅色投影会让人产生物体是凹进平面内的错觉。同理,出现在底部的暗色投影会让人产生物体从平面上突起的错觉。使用text-shadow就可以产生以上的效果。

使用text-shadow前的效果:

div {
	height: 3.5em;
	background: hsl(210, 13%, 60%);
	color: hsl(210, 13%, 30%);
}

27.1.png
使用text-shadow之后(浅色投影,会感觉凹进去了):

div {
	height: 3.5em;
	background: hsl(210, 13%, 60%);
	color: hsl(210, 13%, 30%);
	text-shadow: 0 1px 1px hsla(0, 0%,100%,.8);
}

27.2.png
使用暗色投影,感觉凸出来了:

div {
	height: 3.5em;
	background: hsl(210, 13%, 60%);
	color: hsl(210, 13%, 30%);
	text-shadow: 0 1px 1px hsla(0, 100%,0%,.8);
}

27.3.png

空心字效果

使用text-shadow还可以产生空心字效果,使用前:

div {
	width: 2em;
	height: 1.5em;
	text-align: center;
	background: deeppink;
	color: #fff;
}

27.4.png
使用后:

div {
	width: 2em;
	height: 1.5em;
	text-align: center;
	background: deeppink;
	color: #fff;
	// 下面两种二选一,都可以
	text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;	
	text-shadow: 1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;
}

27.5.png

文字发光效果

还可以通过设置几层重叠text-shadow来实现文字发光效果。

div {
	width: 2.5em;
	height: 1.5em;
	text-align: center;
	background: #203;
	color: #ffc;
	text-shadow: 0 0 .1em, 0 0 .3em;
}

使用text-shadow前后:
27.6.png
27.7.png

还可以使用动画,更加炫酷:

div {
	width: 2.5em;
	height: 1.5em;
	text-align: center;
	background: #203;
	color: #fff;
	transition: 1s;
}
div:hover {
	text-shadow: 0 0 .1em, 0 0 .3em;
}

更强烈的文字突起效果

使用一长串累加的投影,不设模糊并以1px的跨度逐渐错开,使颜色逐渐变按,然后在底部加一层强烈模糊的暗投影,从而模拟完整的立体效果:

div {
	width: 3em;
	height: 1.5em;
	text-align: center;
	background: #58a;
	color: #fff;
	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;
}

27.8..png
还可以把所有的投影都设成黑色,并且去掉最底层的投影,就可以模拟出一种在复古标志牌中常见的文字效果。

div {
	width: 3.5em;
	height: 1.5em;
	text-align: center;
	background: hsl(0, 50%, 45%);
	color: #fff;
	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;
}

27.9.png
最后要注意的是,使用太多的效果也会影响性能,这需要在具体的情景下进行权衡。