《响应式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月前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
32 0
|
2月前
|
编解码 前端开发 JavaScript
|
2月前
|
Web App开发 编解码 前端开发
告别固定字体大小:CSS使用相对单位提升网页可访问性和兼容性
在 Web 开发领域中,有很多误解流传,即使它们被反驳了很多次也仍然存在。"外部链接应该总是在新标签页中打开" 就是一个很好的例子。CSS Tricks 在将近十年前就对此进行了详细的解释(简而言之:大多数情况下是错误的),但它似乎仍然在某些角落中存在。
|
1月前
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
20 1
|
10天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
10天前
|
PHP
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
web简易开发——通过php与HTML+css+mysql实现用户的登录,注册
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
46 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发 容器 内存技术
使用CSS3画出一个叮当猫HTML源码
本文教程介绍了如何使用CSS3绘制叮当猫,通过HTML结构和CSS样式逐步构建叮当猫的各个部位,如头部、脸部、脖子、身体、手脚等。代码示例展示了如何利用渐变、边框、阴影和定位技巧实现三维效果和细节特征。此外,还添加了眼珠的动画效果,让叮当猫的眼睛能够转动。整个过程适合对CSS3感兴趣的读者参考学习,以提升动态图形创作技能。
16 0
使用CSS3画出一个叮当猫HTML源码
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML2、table表格标签
H5+CSS3+JS逆向前置——HTML2、table表格标签
26 0
|
2月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——HTML1、H5文本元素
H5+CSS3+JS逆向前置——HTML1、H5文本元素
28 0