2.12 为字体添加阴影效果
使用CSS3可以轻松地为文本添加阴影效果。既可为特定的元素添加高亮特效,也可应用于body文本段落中达到加强内容的视觉效果。除此之外,也能用来使文本链接更为突出。
2.12.1 准备工作
CSS3让这些变得简单,同时也不需要复杂的设置。打开你的开发环境或是记事本开始特效之旅。当然你也可以访问从Packet Publishing上本书页面获取完整的代码并看看它是如何实现的。
2.12.2 实现方式
首先,创建文本段落。记住,文本内容可以通过我们所喜爱的文本内容生成工具http://lipsum.com得到。现在给文本信息设置一个标题:
以上设置使得文本有一点点的阴影效果,似乎内容从页面中跳出一样。对于正文内容,该效果就已足够。但是对于链接元素来说还不够,还得添加不同层次的阴影特效,才能使链接更加突出。添加阴影的方法与前面的示例一样,只是在后面添加逗号,然后在逗号后面添加另外一个阴影特效。下面的例子给链接文本添加了浅蓝色的阴影效果。
2.12.3 工作原理
该方法是阴影特效的组合。可以通过将不同层次的阴影特效组合在一起产生逼真的3D效果。在此最好的方式就是应用不同的组合方式直到得到满意的3D特效。
时间: 2024-10-26 23:53:12