《响应式Web设计:HTML5和CSS3实践指南》——2.12节为字体添加阴影效果-阿里云开发者社区

开发者社区> 华章计算机> 正文

《响应式Web设计:HTML5和CSS3实践指南》——2.12节为字体添加阴影效果

简介:
+关注继续查看

本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的第2章,第2.12节为字体添加阴影效果,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看

2.12 为字体添加阴影效果
使用CSS3可以轻松地为文本添加阴影效果。既可为特定的元素添加高亮特效,也可应用于body文本段落中达到加强内容的视觉效果。除此之外,也能用来使文本链接更为突出。

2.12.1 准备工作
CSS3让这些变得简单,同时也不需要复杂的设置。打开你的开发环境或是记事本开始特效之旅。当然你也可以访问从Packet Publishing上本书页面获取完整的代码并看看它是如何实现的。

2.12.2 实现方式
首先,创建文本段落。记住,文本内容可以通过我们所喜爱的文本内容生成工具http://lipsum.com得到。现在给文本信息设置一个标题:


df176cc3ed7b5bc3b97f3733d60cfb3fa69c71c2

以上设置使得文本有一点点的阴影效果,似乎内容从页面中跳出一样。对于正文内容,该效果就已足够。但是对于链接元素来说还不够,还得添加不同层次的阴影特效,才能使链接更加突出。添加阴影的方法与前面的示例一样,只是在后面添加逗号,然后在逗号后面添加另外一个阴影特效。下面的例子给链接文本添加了浅蓝色的阴影效果。


cafccc785eb999a27c9952bb0280a225ad774cb9

2.12.3 工作原理
该方法是阴影特效的组合。可以通过将不同层次的阴影特效组合在一起产生逼真的3D效果。在此最好的方式就是应用不同的组合方式直到得到满意的3D特效。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS10软件崩溃 Xcode8崩溃 打印/字体等问题汇总 韩俊强的博客
iOS开发者交流QQ群: 446310206 【1】、Xcode8代码出现ubsystem: com.apple.UIKit, category: HIDEventFiltered, enable_level: 0, persist_level: 0, default_ttl: 0, inf...
970 0
《响应式Web设计:HTML5和CSS3实践指南》——导读
本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的目录,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看
916 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载