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

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

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

《响应式Web设计:HTML5和CSS3实践指南》——1.1节简介

1.1 简介 响应式Web设计是自我学生时代BBS上出现ASCII字符图形至今,Web开发领域最让人感到兴奋的事情之一.HTML5.CSS3及jQuery给旧网络注入了新生命,给使用你应用程序的用户带来乐趣和兴奋.本章介绍的几个方法将会帮助你构建自己的响应式HTML元素及媒介. 这些方法有易有难.所涉及的响应式Web设计的各种元素代码均能在本书中找到,因此书中所提到的所有内容都是可以实现的.每一个响应式Web设计的方法都有助于优化网站展示,无论你的用户使用何种尺寸的何种设备,都会从中得到令其惊叹

《响应式Web设计:HTML5和CSS3实践指南》——导读

目 录 第1章 响应式元素及媒介1.1 简介 1.2 基于宽度百分比的图像缩放1.3 基于cookie及JavaScript的响应式图像 1.4 使视频自适应于屏幕宽度1.5 基于媒介查询的图像缩放 1.6 基于媒介查询的动态导航栏 1.7 基于尺寸的响应式内边距1.8 基于CSS3按钮的进度条 第2章 响应式字体 2.1 简介2.2 创建自适应的响应式字体2.3 使用画布实现文本阴影2.4 使用画布实现内侧阴影和外侧阴影 2.5 使用画布旋转文本2.6 使用CSS3旋转文本2.7 使用CSS3

通过CSS3 Media Query实现响应式Web设计

十一长假已然过去了一大半.今天倒真是晴朗的不行,向窗外望去几乎可以看到阳光穿过凉爽的空气一缕缕洒落下来的样子.自从不再是学生,对每年的几次 长假就无比珍惜,想方设法让每一天都尽量过的饱满一些:夜里闭上眼,满脑子就都是Drupal.博客.咖啡.使命召唤.南方公园...也许需要出门走一走 了. OK开始说正经的了.在之前一篇译文中,我们了解了响应式Web设计的概念.组成要素以及基本的实现思路.今天继续相关话题,我们将从前文介绍过的"弹性布局结构"这方面出发,通过一个具体的实例来深入学习.

《响应式Web设计实践》一2.2 字体大小

2.2 字体大小 响应式Web设计实践 要想让你的设计拥抱Web的流动性,那就意味着在你的设计中要能够灵活地改变字体大小.你可以在Web上使用任意单位来设置字体大小,但主要的方法不外乎三种:像素.em,还有百分比. 2.2.1 像素 长期以来,像素一直都是人们喜欢使用的字体大小单位,其原因很简单:无论浏览器如何设置字体大小,你都能对其进行精确的控制.如果你把字体设置为18px,那么每个浏览器都会将其准确地显示为18px. 但这样的掌控是要付出一定代价的.对于初学者而言,虽然使用像素作为字体大小单

《响应式Web设计实践》一1.2 设备来了,设备来了

1.2 设备来了,设备来了 响应式Web设计实践 我是一名近乎疯狂的旅行者,我不害怕坐飞机,但我担心误机.于是我会常常发现自己坐在拥挤的候机厅里总想找点什么事做,以便用来打发时间. 于是我开始观察身边的人们,更多的时候我会去观察他们使用的是什么样的设备.在最近的一次旅途中,我飞到了一个非常小.非常偏远的机场,小到你只需要五分钟就能办完所有的登机手续.虽然候机厅里只有大概二十五个人,但是Android手机.iPhone以及一些老款的手机都能在那里见到.有人在用Nook读着什么,而我旁边一位头发花白

《响应式Web设计实践》一1.4 成为响应式的

1.4 成为响应式的 响应式Web设计实践 2010年5月,Ethan Marcotte为"A List Apart"写了一篇题为"Responsive Web Design"(响应式网页设计)的文章,他在文章中描述的方法不仅简单,同时又是革命性的.Ethan Marcotte利用三种已有工具:媒介查询(media queries).流动布局(fluid grids)和自适应图片(scalable images)创建了一个在不同分辨率屏幕下都能漂亮地显示的站点(图1

《响应式Web设计实践》一1.7 这本书写给谁

1.7 这本书写给谁 响应式Web设计实践 这本书本意上是为那些希望能在无尽的设备上创建出具有良好界面和功能的站点的设计师和开发者而写的.你不需要有任何响应式设计的经验--前面的几章会让你跟得上的. 但你应该精通HTML和CSS,同时至少要熟悉JavaScript.第8章"RESS"中会涉及一些PHP的代码,但即使你没有太多的PHP知识,你应该也能很容易地接受文中提到的概念.

《响应式Web设计实践》一2.3 网格布局

2.3 网格布局 响应式Web设计实践 早在Web出现前的数十年,在设计中使用网格就已经是一种异常流行的做法了,因为网格有助于实现站点的平衡.间距以及组织结构.一个实现良好的网格系统会使你的站点井井有条,同时还可以提高页面的可读性和可浏览性. 注意 关于网格的更多信息,可以参阅Khoi Vinh的书籍,或者找一份Mark Boulton的系列视频来看. 在<"Ordering Disorder: Grid Principles for Web Design"(秩序之美:网页中的网

《响应式Web设计实践》一导读

致 谢 响应式Web设计实践 人们常说写书是一件孤独的事情,也许有些时候的确是这样的,但这本书却是个例外.如果这本书能得到一些好评,那么这些好评都应归功于这一路上帮助过我的那些人,以及他们的勤奋.耐心和反馈. 我要向他们致以最真诚的感谢-- Michael Nolan,最先邀请我写这本书的人,谢谢你对我如此信任. Margaret Anderson和Gretchen Dykstra,谢谢你们能容忍我那糟糕的标点符号用法,而且还让我觉得是我通过自己的努力而摸索出了写作的要义. 感谢Danielle