《响应式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特效。

相关文章
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
编程笔记 html5&css&js 071 JavaScript Symbol 数据类型
|
3天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
13 1
|
26天前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
33 3
Web前端全栈HTML5通向大神之路
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 079 JavaScript 循环语句
编程笔记 html5&css&js 079 JavaScript 循环语句
|
1月前
|
JavaScript 前端开发 开发者
编程笔记 html5&css&js 078 JavaScript 条件判断语句
条件判断语句是首先要接触的语句。通过条件判断来执行不同的代码块。
|
1月前
|
JavaScript 前端开发 编译器
编程笔记 html5&css&js 077 Javascript 关键字
编程笔记 html5&css&js 077 Javascript 关键字
|
1月前
|
JavaScript 前端开发
编程笔记 html5&css&js 076 Javascript 表达式
编程笔记 html5&css&js 076 Javascript 表达式
|
1月前
|
存储 JavaScript 前端开发
编程笔记 html5&css&js 075 Javascript 常量和变量
编程笔记 html5&css&js 075 Javascript 常量和变量
|
1月前
|
JavaScript 前端开发 程序员
编程笔记 html5&css&js 074 Javascript 运算符
编程笔记 html5&css&js 074 Javascript 运算符
|
1月前
|
JavaScript 前端开发 Java
编程笔记 html5&css&js 073 JavaScript Object数据类型
编程笔记 html5&css&js 073 JavaScript Object数据类型