(特价书)响应式Web设计：HTML5和CSS3实践指南

2.6　使用CSS3旋转文本 / 33
2.7　使用CSS3制作3D文本 / 35
2.8　基于文本遮罩的文本纹理 / 37
2.9　基于位置伪类的交替行样式 / 39
2.10　基于before及after伪元素添加字符 / 41
2.11　基于相对字体大小的按钮 / 42
2.12　为字体添加阴影效果 / 45
2.13　基于边框半径的圆角实现 / 47
第3章　响应式布局 / 51
3.1　简介 / 52
3.2　基于min-width和max-width属性的响应式布局 / 52
3.3　基于相对内边距的布局控制 / 55
3.4　为CSS添加媒介查询 / 58
3.5　基于媒介查询创建响应式宽度布局 / 62
3.6　基于媒介查询改变图片大小 / 68
3.7　基于媒介查询隐藏元素 / 70
3.8　创建平滑过渡的响应式布局 / 72
第4章　使用响应式框架 / 84
4.1　简介 / 85
4.2　使用流式960网格布局 / 85
4.3　使用Blueprint网格布局 / 90
4.4　基于三分法的流式布局 / 95
4.5　响应式960网格框架—Gumby / 101
4.6　易上手的Bootstrap框架 / 107
第5章　设计移动设备优先的Web应用 / 115
5.1　简介 / 116
5.2　使用Safari开发者工具的用户代理设置 / 116
5.3　通过Chrome插件设置用户代理 / 120
5.4　使用插件调整浏览器窗口大小 / 123
5.5　学习视窗及其相关选项 / 124
5.6　为jQuery Mobile添加标签 / 128
5.7　基于jQuery Mobile添加子页面 / 132
5.8　基于jQuery Mobile制作列表元素 / 135
5.9　基于jQuery Mobile开发具有移动设备外观的按钮 / 143
5.10　仅通过媒介查询为移动设备设置移动版本的样式表 / 150
5.11　仅为移动设备添加JavaScript功能特效 / 152
第6章　优化响应式内容 / 155
6.1　简介 / 156
6.2　使用IE开发者工具进行响应式测试 / 156
6.3　浏览器测试—使用插件 / 160
6.4　开发环境—使用免费IDE / 166
6.5　虚拟化—下载VirtualBox / 169
6.6　在Chrome中使用浏览器缩放工具 / 174
第7章　非侵入式JavaScript / 178
7.1　简介 / 179
7.2　基于非侵入式JavaScript编写“Hello World” / 179
7.3　基于事件监听器创建发光效果的“提交”按钮 / 183
7.4　制作鼠标悬停后的按钮突出效果 / 189
7.5　基于非侵入式jQuery改变页面元素大小 / 193
7.6　基于非侵入式JavaScript的密码遮罩 / 197
7.7　基于事件监听器实现图像阴影的动态效果 / 201

.　　恭喜你拥有本书。我们准备了以下内容来让你的购买价值最大化。
　　

.　　1.2.4相关章节
　　1.3节
　　1.7节
　　1.3基于cookie及JavaScript的响应式图像
　　使用复杂的服务器端逻辑也能实现响应式图像。有时因为一些特殊的需求，开发者往往不能够采取最简单的方法来实现特定的目标。之前提到的基于宽度百分比的方法依赖于客户端来实现对于大图像文件的缩放。而本方法则是在服务器端依据客户的请求，返回恰当大小的图像文件。如果你正为网页加载过慢导致的网站性能问题而烦恼，也许该方法能够给不堪重负的服务器负载和网络带宽带来一些改进。
　　1.3.1准备工作
　　本条目所涉及的方法都需要在服务器端实现相应的功能。首先，服务器端需要提供PHP服务。其次，服务器端需要实现根据客户端的请求返回3张不同大小的图像的功能。
　　1.3.2实现方式
　　下面的JavaScript代码比较简单，创建一个基于用户设备屏幕尺寸的cookie。当客户端请求服务器端的图像时，运行在服务器端的PHP服务便会依据该屏幕参数决定返回何种大小的图像。
　　回到服务器端，在相应的Web资源路径下创建名为images的文件夹，同时新建PHP文件(名为index.php)，以下为相应的PHP代码：
　　现在通过你的图像编辑软件，打开一张尺寸较大的图像，然后保存两份较小尺寸的新图像。如果原始图像为300px，那么新图像的大小可以分别保存为200px和100px。然后分别命名为robot.png、robot-med.png及robot-low.png，并上传到images文件夹中。
　　最后很重要的一点，将下面的HTML文件存放到服务器端的文档根目录中：
　　可以在下面的屏幕截图中看到该方法的执行结果。
　　虽然该方法只能根据屏幕大小返回特定的图像，并不完全是自适应的，但是该方法在服务器端提供与CSS媒介查询一样的功能。可以通过CSS给这些图片加上样式，或者使用JavaScript实现动画效果。将不同的方法结合在一起使用，能够更好地提供响应式内容。
　　本方法中所涉及的代码最初由我聪明的同行所创建，放置在http://www.html.it/articoli/responsive-images-con-i-cookie/上。
　　1.3.3工作原理
　　首先HTML文件中创建cookie用以记录设备屏幕的尺寸。当向服务端发起获取图片的请求时，就如同PHP中的include声明一样。首先检查声明的文件是否存在，然后读取cookie中的屏幕尺寸，最后返回与之适配的图像资源。
　　1.4使视频自适应于屏幕宽度
　　流媒体视频同样可以为响应式的。在HTML5页面中嵌入响应式视频是一件非常简单的事情。如video标签支持百分比的宽度设置，但是问题在于，该方案需要网站主机拥有对应的视频源。如果已经有视频源，那么一切都易如反掌。
　　不过，使用视频托管网站（如YouTube或Vimeo）比自己托管更具优势。首先，自己的托管服务器可能会受到带宽或磁盘空间的限制。其次，相比于使用自己的托管服务器，使用视频托管网站上传可用的Web视频的整个过程更加便捷。
　　1.4.1准备工作
　　视频托管网站允许你在自己的页面中嵌入iFrame或object代码片段，用以在你自己的网站中展示视频。但是iFrame或目标代码段不能用在video标签中。因此，为了实现响应式视频功能，所用的方法相对复杂一些，但是仍然不太困难。
　　1.4.2实现方式
　　在HTML中将视频源代码段嵌入div元素中，同时设置div元素为相对定位，其底部内边距设定为50%～60% 。然后设定子元素，即视频iFrame对象为绝对定位，宽度为100%，高度为 100%。这使得iFrame对象完全填充了父元素。
　　以下HTML代码展示如何通过iFrame标签从Vimeo获取视频信息：
　　下面的HTML代码展示如何使用老版本的YouTube标记对象：
　　以上两段HTML代码均依赖于以下CSS配置：
　　如果不希望视频占据整个页面的宽度，可以使用width及max-width属性来限制视频宽度。接着使用另外一个div元素包装在class属性为video-wrap的元素的外层，并且设定width属性为固定值，属性max-width的值为100%。
　　本方法适用于目前所有的主流浏览器。
　　1.4.3工作原理
　　该方法称为固有比率视频法（Intrinsic Ratios for Videos），由Thierry Koblentz在网站A List Apart上提出。在元素中所嵌入的视频具有固有的长宽比，并且被赋予了一个绝对位置。这就使得允许视频窗口大小改变的同时，锁定视频长宽比。
　　1.5基于媒介查询的图像缩放
　　媒介查询是针对响应式图像的另一个有用和高度可定制的方法。这与通过设置宽度百分比来实现自适应宽度的方法并不相同。你的设计可能需要为不同的屏幕尺寸范围准备一些具体的图像宽度，而自适应宽度会打破你的设计。
　　1.5.1准备工作
　　这种方式仅仅需要一张图像。而且在客户端浏览器调整图像，而不是在服务器端。
　　1.5.2实现方式
　　HTML代码相当简单，使用标准的图像标签创建一个图像元素，如下所示：
　　先从一个简单的版本开始，创建一个媒介查询。该媒介查询将检测浏览器窗口的大小，如果浏览器屏幕大于1024px，将提供一张较大的图像，为较小的浏览器窗口提供较小的图像。媒介查询首先查找媒介类型screen，然后查找屏幕尺寸。当浏览器满足媒介查询条件时，将渲染小括号中的CSS。
　　现在给这张图像标签添加一个类属性。该类在不同的媒介查询中的响应是不一样的，如以下代码所示：
　　将CSS中的这个类添加到每个媒介查询中，所对应设置的尺寸都不相同。这将会使浏览器针对每个不同的尺寸窗口渲染所需的图像大小。媒介查询可与其他CSS类共存。接着，添加一个独立于媒介查询的CSS的类属性，设置图像属性为height:auto。这样只需添加一行CSS即可对两个媒介查询都起作用。
　　为了使图像能自适应于多个设备屏幕尺寸范围，可以结合max-width和min-width媒介查询。为大小介于1024～1280px之间的浏览器窗口指定图像尺寸，需要为screen添加一个min-width为1024px、max-width为1280px的媒介查询。
　　通过媒介查询方法便可实现针对多个不同的浏览器窗口尺寸设置对应的图像尺寸。
　　1.5.3工作原理
　　CSS3媒介查询在CSS中通过逻辑条件将浏览器依据窗口属性进行区分，并基于此来完成不同样式的渲染。该方法正是利用这一点来对不同的浏览器窗口尺寸设置一个不同的图像宽度。这提供了响应式的图像尺寸，因此你可以进行高粒度级别的控制。
　　1.6基于媒介查询的动态导航栏
　　媒介查询不仅限于调整图像大小。可以使用媒介查询为访问者提供更加动态的网页。可以使用媒介查询显示一个基于不同屏幕尺寸的响应式菜单。
　　1.6.1准备工作
　　为了实现一个响应式菜单系统，我们将使用两个不同的菜单，为三种不同的浏览器窗口尺寸显示一个动态菜单。
　　1.6.2实现方式
　　对于较小的浏览器窗口，特别是对移动设备和平板电脑，创建一个简单的select菜单，其只占用少量的垂直空间。这个菜单为导航选项使用了HTML中的form元素，通过触发JavaScript代码来加载选择的新页面。
　　对于较大的浏览器窗口尺寸，创建一个可以通过CSS设置样式的简单ul列表元素。这个菜单对于不同的媒介查询会接收不同的布局和外观参数，并且紧跟着select菜单被追加到同一个页面。
　　为了使菜单变成响应式，需要为目标浏览器窗口尺寸创建一个媒介查询。如果浏览器窗口小于800px，CSS将只显示拥有small-menu类的div元素中的select 表单。对于所有较大的浏览器窗口，CSS将显示拥有large-menu类的div元素中的ul列表。当浏览器窗口跨越801px这样的临界宽度值时，页面上会呈现一个菜单切换的效果。
　　对于更大的屏幕尺寸，可以使用相同的ul列表，甚至可以使用相同的HTML，但是通过媒介查询来应用新的CSS从而交付一个完全不同的菜单。
　　对于中等尺寸的菜单，使用CSS来显示列表项为水平列表，如下面的代码段所示。
　　由此得到了一个水平的菜单列表。我们希望这个导航版本出现在中等尺寸的浏览器窗口中。将其放置在范围为801～1024px的媒介查询中，如下面的代码段所示。
　　为了尽可能好地运用响应式导航元素，我们想要在屏幕宽度变化时，菜单列表版本能够移动到一个不同的布局位置。对于中等尺寸宽度，即801～1024px，菜单停留在页面顶部并保持100%宽度。当屏幕宽度大于1025px时，菜单将浮动到父元素的左边。
　　在801～1024px的媒介查询中，为large-menu类添加一个100%宽度，对于1025px的媒介查询，为large-menu类添加一个20%宽度及float:left值。
　　为了填满这个页面，也将添加一个包装在div元素中的文本段落。可以再次使用Lorem Ipsum文本生成器来创建填充文本(http://lipsum.com/)。在中等宽度媒介查询中设置包含该文本段落的元素宽度为100%。在最大的媒介查询中，设置包含该文本段落的元素宽度为80%，将将其浮动到父元素的右边。
　　样式应该与以下代码段一样。
　　最终结果是一个拥有三个不同版本导航菜单的页面。当发现对于每个特定的浏览器窗口尺寸都有菜单的一个优化版本时，你的观众将会感到惊讶。你可以在以下截图中看到这些神奇的导航元素。
　　1.6.3工作原理
　　每个导航版本应用了CSS3的媒介查询属性来最大限度地提高菜单和内容的可用空间。在最小的窗口中（即小于801px），导航整齐地排列在select表单元素中。在中等尺寸的窗口中（介于801～1024px）,导航是内联的并且横跨页面顶部，内容紧跟着导航。最后，对于最宽的浏览器窗口，导航浮动到了左边并且只占横屏宽度的20%，而内容在宽屏浏览器窗口剩余的80%（右边）中保持最大化。需要更多的计划和努力才能实现该技术，但是值得用它为你的用户提供尽可能最佳的视角。
　　1.7基于尺寸的响应式内边距
　　为了衬托一个响应式宽度的图像元素，需要添加相对的内边距。如果使用静态的宽度内边距，图像内边距在较小的浏览器窗口中可能会显得过大，从而与其他附近元素相互挤压，甚至可能将图像挤出屏幕。
　　1.7.1准备工作
　　理解盒模型属性的计算是一个好的开始。一个对象所占的总宽度是它的实际宽度加上它两边的内边距，边框以及外边距，即 2 * （外边距+边框+内边距） + 内容的宽度 = 总宽度。
　　1.7.2实现方式
　　假设一张图像在正常的非响应式状态下的宽度为200px，典型的内边距可能是8px，因此使用之前的盒模型，公式如下：
　　为了找到内边距的百分比，使用内边距除以总宽度，即8/216 = 0.037，舍入为4%。
　　在创建响应式百分比宽度图像之前，先创建CSS和HTML。给该图像添加一个内边距为4%的类。
　　为了帮助你看到实际内边距宽度随着浏览器窗口尺寸的改变而变化，可以给图像的CSS添加一个背景颜色（background-color: #cccccc;）。
　　1.7.3工作原理
　　图像内边距设置为100%则会紧贴其父元素的边缘。当父元素尺寸变化时，图像内边距也会相应调整。如果盒模型所对应的各项参数计算得当，布局将会成功地响应浏览器窗口的宽度变化。
　　1.8基于CSS3按钮的进度条
　　和其他网站一样，你的网站也需要去迎合那些急性子的用户。如果你的网站有一个可提交的表单，访客可能会不耐烦地多次单击“提交”按钮，因为你的页面加载新内容不够快。这可能会导致一个问题，就是表单多次提交同样的数据。
　　1.8.1准备工作
　　为了防止这种行为，可以添加一些简单的视觉提示，告诉用户后台正在处理，请保持耐心。如果效果比较华丽，甚至可以给他们匆忙的生活增添点阳光。这个方法不需要任何图像，只需要使用CSS创建一个漂亮的渐变式提交按钮。本节内容很长，你可以先停下来喝杯咖啡。
　　1.8.2实现方式
　　可以先创建一个包含几个文本框和一个提交按钮的表单。然后，为了使表单真的很酷，为文本框使用HTML5占位符属性。即使有占位符，这个表单还是相当单调。
　　注意，Internet Explorer 9还不支持此方法。
　　通过CSS属性先给这个按钮增添点生气。
　　下图是显示效果。
　　如果给按钮添加一个CSS3渐变效果，按钮甚至会更闪耀。为实现该效果，每个浏览器渲染引擎（Opera、Internet Explorer、WebKit(Chrome和Safari)及Firefox）的CSS代码都不一样。可以添加任意多的渐变偏移，只须添加一个color阶段及相对于顶端的位置百分比。每个偏移使用逗号分隔，如下列代码段所示。
　　效果如下图所示。
　　可以通过CSS给该按钮再添加一个hover效果。使用该属性，当鼠标指针移动到按钮上时，看起来就像它被按下一样。下面的CSS将给按钮添加黑色边框。
　　下面是显示效果图。
　　使用CSS3盒阴影及jQuery可以实现一个简单的动画，在单击Submit按钮后有一个跳动的光晕环绕着该按钮。使用jQuery创建一个事件监听器来监听按钮的click事件。在click事件中作用于该表单按钮元素的一系列类将发生变化。脚本将动态添加Partial-fade类到按钮元素中。
　　不要忘记添加jQuery源码链接到head标签中：
　　然后，在表单后面插入下列脚本：
　　为了实现单击按钮后按钮的炫目特效，需要新加一个 partial-fade类到CSS文件中，赋予它一个CSS3盒阴影属性，并且修改边框属性。
　　现在,当Submit按钮被按下时有蓝光一闪而过的特效。下图显示了最终的样子。
　　哇！为了给该按钮实现这样一个小细节我们真是大费周章。但是这样的细节真正有助于制作一个漂亮的网站。这正是我喜欢用来给访客惊喜的细节之一。
　　1.8.3工作原理
　　CSS3背景渐变可以使一个漂亮的按钮在不同浏览器上外观一致。渐变是复杂的，尤其是当前每个浏览器要求各自的CSS代码实现渐变。可以通过手动添加百分比和颜色控制渐变转效点（breakpoint）。当事件被触发时，添加盒阴影、边框及jQuery使按钮产生有趣的效果。
　　第2章
　　响应式字体
　　2.1简介
　　本章主要论述如何制作响应式字体。你将学到优化文本以适应不同设备的技巧，以及美化字体的方法。涉及的技术只有CSS3及结合了JavaScript的HTML5的画布元素。借助响应式字体，能够向文本应用一些令人兴奋的效果。
　　学习完本章，你将掌握一系列技术，能够用它们创作神奇的响应式站点。本章只涵盖了基础知识，但如果再结合一些创造力，你就能够制作出精彩的产品。
　　2.2创建自适应的响应式字体
　　该技巧是一个简单的响应式字体示例。它将演示如何使用新的尺寸单元REM。REM的意思是根EM（Root EM）。如果使用EM单元，意味着字体尺寸与根元素字体尺寸有关，而不是父元素字体。
　　2.2.1准备工作
　　在进一步讨论之前，我们先看看这个技巧。先通过我最爱的Ipsum生成器(http://ipsum.com)生成一些用于填充的文本内容。至少生成一个段落文本并复制到剪贴板中。
　　2.2.2实现方式
　　现在，将填充文本粘贴到HTML文档中并包装在一个段落标签中。设置该段落元素的类为a，然后再复制一份并将新段落元素的类改为b。如下面的代码片段所示：
　　接下来，创建HTML的基本font-size属性和静态尺寸段落的font-size样式，用来比较字体大小的改变，这有点像实验中的对照组：
　　然后创建两个@media查询，一个为orientation:portrait，另一个为orientation:landscape。在orientation:portrait媒介查询中，设置“a”类段落元素的font-size属性值为3rem。在orientation: landscape媒介查询中，设置“a”类段落的font-size属性值为1rem。
　　现在，将浏览器窗口从横向模式调整到纵向模式时，会看到第一个段落的字体大小与基本字体大小的比例从1:1变为了3:1。这虽然看起来非常简单，但是该方法可以多样化，基于此方法可以实现很多令人印象深刻的响应式字体效果。
　　2.2.3工作原理
　　当浏览器发送请求时，CSS3的@media查询会基于视窗宽度返回不同的样式。随着视窗大小的改变会实时地加载或建立（重建）样式。虽然不会有太多的用户在浏览网站过程中频繁改变视窗大小，但是如何使得网站更好地适应不同浏览器窗口大小往往是一项费时的工作。
　　2.2.4相关章节
　　2.11节
　　2.3使用画布实现文本阴影
　　HTML5为网页设计引入了一个新元素，即画布(canvas)元素。该元素用于在网页中使用JavaScript实时创建图形。
　　2.3.1准备工作
　　画布元素会在页面上创建一个矩形区域。默认的尺寸规格为300px宽，150px高。可以使用JavaScript指定具体大小。本方法的相关示例代码激增较快，可以在Packt Publishing的网站中获取全部相关代码。
　　2.3.2实现方式
　　首先，在一个简单的HTML页面中创建画布元素：
　　通过JavaScript从DOM中获取该画布元素。
　　然后调用getContext()方法。getContext(‘2d’)方法的返回值是一个内置的HTML5对象。它拥有若干用来绘制文本、形状、图像等的方法。
　　接下来使用JavaScript绘制文本。我们编写代码来设置该对象的水平和垂直阴影偏移量、模糊度及阴影颜色等属性。
　　文本内容及属性可以直接通过下面的JavaScript代码设置，但是也可以通过DOM中的变量来传入。
　　回到HTML代码，给body元素添加onload="drawCanvas();"脚本命令。当页面加载时，JavaScript将触发绘制事件，从而将文本及其阴影绘制到画布中，如下面的截图所示。
　　2.3.3工作原理
　　不用太深入了解JavaScript的工作原理，设计者就可以编写脚本操控画布元素，从而在页面加载时绘制页面所需内容。body元素的onload=“drawCanvas();”命令会触发JavaScript的执行，把内容绘制到画布上。
　　2.3.4相关章节
　　2.5节
　　2.4使用画布实现内侧阴影和外侧阴影
　　本方法也使用画布和JavaScript通过浏览器绘制文本和实现特殊效果。通过画布无法直接实现内侧渐变的阴影效果或插图效果，但是，使用stroke方法可以模拟文本中的内侧阴影。
　　2.4.1准备工作
　　本方法会使用前面章节已经使用过的一段代码。可以从Packt Publishing的网站直接下载这段代码，它与2.3节中的代码是一样的。这段代码可以运行在本地电脑中，不需要任何Web服务器。可以从本书页面中得到所有相关代码。
　　2.4.2实现方式
　　在开始之前，先创建一个含有画布元素的简单HTML页面。
　　通过JavaScript从DOM中取得该画布元素。
　　然后调用getContext()方法。getContext('2d')方法的返回值是一个内置的HTML5对象。它拥有若干方法用来绘制文本、形状和图像等。
　　下面这段脚本通过多种效果的组合来实现内侧阴影和外侧阴影。脚本中添加了一个投影和两个相异的轮廓。首先，添加一个阴影到左上角，背景色为黑色，并使得context.shadowBlur属性的值为2。然后调用context.fillText方法，并给画布的context对象设置context.strokeStyle和context.strokeText属性。
　　与突起的外观效果不同，该特效使得文本有一定的倾斜角度，并且有一个内发光的阴影效果。这种效果如下图所示。
　　2.4.3工作原理
　　正如本节的开头所述，画布元素对象并没有提供能够直接实现内侧阴影效果的方法。但是可以结合context.fillText和context.strokeStyle方法来创建一个足够逼真的内侧阴影特效。
　　2.5使用画布旋转文本
　　HTML5中的画布元素不只是能给文本着色或者添加阴影，你也可以用它来移动或操作位于画布区域中的元素对象。在本节中，我们将旋转位于画布中的元素对象。
　　2.5.1准备工作
　　学习本节需要掌握之前的几节。如果跳过了之前的几节也没关系，你还可以参照完整代码来学习。
　　2.5.2实现方式
　　一旦你完成了之前技巧中的画布设置步骤，那么实现旋转的基本步骤很简单。在函数开头添加一个rotate方法的调用。
　　你可能会发现位于画布上的文本向右旋转了。怎么回事？无论画布中含有什么元素，rotate方法默认会旋转整个画布。
　　画布的默认尺寸较小，为300px宽，150px高。修改画布中所含元素的尺寸属性不会影响画布尺寸，但会使画布中的元素对象失真。如果要修改画布及画布中元素的尺寸，可以通过在JavaScript中设置canvas.width和canvas.height属性来完成。
　　另外，因为整个画布自身被旋转了，但是文本旋转并没有围绕特定的参照点，因此文本位置需要被重新定位到正确位置。在本例子中，需要设置填充和笔画的偏移：
　　效果如下图所示。
　　2.5.3工作原理
　　JavaScript能够通过rotate方法来旋转整个画布以及绘制在画布中的所有元素。只是在决定使用该方法时需要预先考虑所使用的场景和进行相关设置。虽然看起来有些复杂，但这不失为在大型web项目中实现响应式设计的理想工具。
　　2.5.4相关章节
　　2.6节
　　2.6使用CSS3旋转文本
　　CSS3提供了一个旋转文本的简单方法。如果项目不需要使用复杂的画布元素，使用transform:rotate属性不失为一个易于实现的解决方案。
　　2.6.1准备工作
　　在HTML文档中写下一行文本。打起精神来，你将使用CSS3旋转这行文本。
　　2.6.2实现方式
　　将文本包裹在段落标签元素中：
　　然后，添加CSS transform属性来旋转文本。每个浏览器实现旋转的方式都不同，所以需要设置每个浏览器自身唯一的transform属性。然而，每个设置都会使用transform属性的子属性rotate，并且后面紧跟着旋转角度，如下面的代码片段所示：
　　2.6.3工作原理
　　transform属性可以给元素应用2D或3D变换。除了旋转，其他相应属性还可以实现元素的移动、扭曲以及透明化效果。
　　2.6.4相关章节
　　2.5节
　　2.7使用CSS3制作3D文本
　　在前几节中，我们使用画布元素创建了投影、斜面以及内侧阴影。使用CSS3可以让文本真的站起来。使用CSS3的text-shadow属性，可以让文本看起来好像伸出屏幕来面对用户。
　　2.7.1准备工作
　　如果你想直接跳过本节，你可以从Packt Publishing的网站上下载代码。否则，如果你想边学边做，那就一起来创建属于你自己的3D文本吧。下面将通过组合多个CSS3的阴影效果来实现3D特效。
　　2.7.2实现方式
　　在IDE中，创建一个在body元素中只有一个header元素的HTML文档。在head标签中设置一些样式，并给header元素设置color: #f0f0f0;，如下面代码片段所示：
　　现在再添加7个X和Y方向递增或递减的text-shadow系列属性，如从0px 0px0px #666到 -6px -6px 0px #666。
　　现在可以看到header已经跨出了屏幕。好了，几乎完成了！为了确保它真的能够弹出屏幕，我们需要再加些效果。当在屏幕上创建任何3D对象时，给予它一致的照明和阴影是相当重要的。因为该文本向上跃起，所以需要一个阴影。
　　添加另外6个X和Y方向的text-shadow属性，只是坐标值为正值，颜色相对较浅（color:#ccc;）。
　　这个阴影效果还可以，但是看起来还是有点假。好吧，把它提高到另一个层次。我们把元素背景模糊变暗。Text-shadow属性的第3个数字用以实现模糊效果，所以设置一个递增的值使其越来越模糊：0、0、1、1、2、3和5，如下面的代码所示。除此之外，后面的背景色也应该越来越暗：#888、#777、#666、#555、#444、#333和#000。
　　现在header有了一个完全逼真的3D效果。下面的截图显示了这个特效。
　　2.7.3工作原理
　　尽情试验和体验本方法的不同组合方式，来实现那些令人欢呼的字体效果。CSS3将字体设计带到了一个全新水平，而之前要想达到如此深度的定制特效却总是苦难的事情。CSS3不仅做到了，并且做得很好。
　　text-shadow属性可以处理大量的阴影属性。因此，你可以把这些阴影按照与文本之间的距离依次堆叠起来。随之而来的，你的文本拥有了3D特效。
　　2.8基于文本遮罩的文本纹理
　　CSS3处理图像的强大功能使我们可以通过一张图片来给文本添加图像遮罩。换做以前，这只能在图像处理工具中创建一张带有该效果的静态图片来实现。
　　2.8.1准备工作
　　首先需要一张图片来作为纹理遮罩。使用图片编辑软件，生成一张具有透明通道（alpha channel）的新图片。如果没有能够生成带透明通道的PNG格式图片的图片编辑工具，你可以从http://www.gimp.org下载名叫GIMP的免费图片编辑工具。可以在图片的顶部采用散点画笔创建一个具有一定纹理的区域，来快速生成一张用于纹理遮罩的图片。
　　保留该图片的透明通道，以PNG格式将其保存在网站对应的images目录下。
　　2.8.2实现方式
　　在你的HTML文件中定义一个头元素，其中包含需要添加纹理特效的文本。然后，为其添加一些文本内容：
　　现在可以添加CSS标记了。这将包括很大的字号（为了炫耀纹理渲染的效果）、白色字体，内边距及对齐等，当然也包括图片遮罩属性。
　　注意不同浏览器要求的属性前缀不同。
　　CSS特效呈现在下面的截图中。
　　2.8.3工作原理
　　遮罩图片根据本身的透明度裁剪了元素的可视区域。使用CSS将遮罩图片应用于文本时，遮罩部分会被裁剪掉。该方法的实现原理与采用图像编辑软件产生的透明图层类似。
　　2.9基于位置伪类的交替行样式
　　对于那些在以前需要恼人且复杂的方案来解决的问题，CSS3中的位置伪类提供了极为简单的解决方案。直到最近，为了给列表或表格中的交替行添加样式，如果能够在服务器端添加一些处理逻辑，你至少可以通过计数器来遍历列表，更坏的情况是，你甚至得手动为你的行元素编号。
　　2.9.1准备工作
　　CSS3所提供的解决方案非常简单。首先创建带有列表元素的HTML文件。给列表元素指定类并不是必需的，因为你可能想将该样式应用到整个网站：
　　2.9.2实现方式
　　为列表元素添加相应的CSS属性，给奇数位置的<li>元素设置基于位置信息的伪类。该伪类的属性包括背景色，以及能够显著与默认字体颜色模式区分的字体色。
　　该方法会自动给位于奇数位置的列表元素添加样式，十分神奇的感觉！特效呈现在下面的截图中。
　　可以休息一下了，一切都很简单！
　　2.9.3工作原理
　　依据http://www.w3.org上的定义，伪类符号:nth-of-type(an+b)表示元素在同一元素层次下有an+b-1个兄弟节点在其之前，n在文档树中表示零或任意正整数，除此之外，元素还得有对应的父元素。
　　这究竟意味着什么？这就是说，只要某元素在其父元素下拥有相似的兄弟元素，你就能够使用（–n+2）这样的公式来表示兄弟元素的最后两行，或者为了简便，直接使用even或odd代表奇偶子元素，然后就可以使用CSS来对这些元素添加样式。
　　2.10基于before及after伪元素添加字符
　　就像在电视剧《迷离时空》（The Twilight Zone）中遗失的一集一样，CSS提供的新属性赋予了使用者在内容中添加伪标记的能力。可能听起来会有点奇怪，但这种方法却有着众多的应用场景。例如一个场景是，需要在显示的时候把文本内容放进引号之中，但是同时不想在内容或者主题文件中添加这些引号，显然这样是比较明智的做法。或者你也想通过标签和@标记尝试时下流行的Twitter，例如想要在内容之前添加#或是@符号。采用CSS标记方法即可完成功能，呈现出如下代码行中的内容：
　　2.10.1准备工作
　　该方法不需要任何服务器端的逻辑或者特殊技巧。你只需在本地打开页面就能看到实际的应用效果。
　　2.10.2实现方式
　　实现该方法只需要CSS即可，因此需要做的只是创建HTML页面，在页面中对于目标内容设定class或id属性：
　　CSS标记方法有一点需要理解，插入的符号使用被插入内容所设定的内边距及外边距。该方法使用class:before和class:after伪类。在CSS中对before的设定为.class:before {content:"#";}。用你需要使用的内容替换#。至于after，采用.class:after{}替换.class:before{}。
　　2.10.3工作原理
　　CSS中的before及after伪元素分别在元素内容的前后添加设定内容。需要注意的是，添加的内容不是真正的内容或者元素，不能应用标记方法或是JavaScript中的事件触发器。
　　2.11基于相对字体大小的按钮
　　在一些场景下，响应式的按钮字体也是必需的。网站的移动版就是很好的例子。当在iPhone中查看一个常规按钮时，往往发现其太小而不易点击。结果就是，对移动设备的疏忽，带给使用移动设备的用户非常糟糕的用户体验。
　　2.11.1准备工作
　　本节中所介绍的方法是使用新的字体尺寸单位REM。通过本方法，使用移动设备访问的用户能够看到更大的响应式的按钮字体。
　　REM是CSS3引入的新字体尺寸单位。是Root EM的简写，意即相对于根元素的字体大小。而EM是相对于父元素的字体大小，因此二者是有区别的。一种使用场景是在某些元素中使用REM，让其获得相对于整个body基本字体大小的值。
　　2.11.2实现方式
　　该方法通过@media查询的方式为桌面设备及移动设备构建响应式的按钮。下面就是具体的实现步骤。
　　首先创建一个简单的HTML页面，含有一些基本占位符的文本信息（http://lipsum.com）和一个submit类型的input。
　　接着为刚才的HTML页面元素添加CSS属性，基本字体设置为62.5%，同时为文本信息设置一个静态的字体大小，以此作为该方法的参照。
　　下一步需要创建@media查询，以期适应移动设备及两个不同大小的桌面设备窗口。在此为桌面设备添加额外的@media查询的目的在于，即使无法访问移动设备，也能立即观察到响应式的效果。
　　为大小为1024px和1280px的桌面设备建立@media查询，同样为移动设备设置两个@media查询，均为max-device-width: 480px，但是为了适应横竖屏，其中一个为orientation:landscape，另一个为orientation:portrait。
　　在桌面设备的两个@media查询中，都添加一个input元素；对于min-width:1024px的查询设置为font-size:1rem，而对于min-width:1280px的查询则为font-size:2rem。为这两个查询添加属性width:84px;和padding:2%。
　　在为移动设备设置的@media查询中，同样都添加一个input元素。在orientation:landscape的查询中，设置属性font-size:2rem;及width:25%;，而对于orientation:portrait，该属性值则为font-size:2.4rem;和width:30%;。
　　现在如果通过移动设备查看该页面，就能发现REM字体大小单位如何相对于设置的基本字体创建新的字体。在移动设备上，可能会出现字体太小而很难辨识，同时按钮又太小而不易使用的情况。将你的移动设备从竖屏转换为横屏，马上就能发现按钮及其字体大小发生了变化。
　　对比移动设备版本和桌面设备版本的实现，会发现在每一个不同的设备下面，按钮的属性值均有所区别。如果将桌面设备浏览器窗口在1024px和1280px之间缩放的时候，同样会发现按钮的字体有所变化。
　　2.11.3工作原理
　　字体大小单位REM创建了一个字体大小，该字体大小是相对于在HTML或body元素中的已经声明的基本字体大小而言的，如果未声明基本字体大小，则是相对于内建字体大小的。而通过@media查询的方式则能在不同设备和不同方向下给出实现相对字体大小的解决方案。
　　2.12为字体添加阴影效果
　　使用CSS3可以轻松地为文本添加阴影效果。既可为特定的元素添加高亮特效，也可应用于body文本段落中达到加强内容的视觉效果。除此之外，也能用来使文本链接更为突出。
　　2.12.1准备工作
　　CSS3让这些变得简单，同时也不需要复杂的设置。打开你的开发环境或是记事本开始特效之旅。当然你也可以访问从Packet Publishing上本书页面获取完整的代码并看看它是如何实现的。
　　2.12.2实现方式
　　首先，创建文本段落。记住，文本内容可以通过我们所喜爱的文本内容生成工具http://lipsum.com得到。现在给文本信息设置一个标题：
　　在文本内容中插入一些链接，设置href属性，同时为链接添加一些描述词语：
　　首先，给文本段落添加投影特效。CSS3所提供的dropshadow特效就能实现。在CSS文件中添加text-shadow属性。对于IE浏览器，添加filter属性。
　　以上设置使得文本有一点点的阴影效果，似乎内容从页面中跳出一样。对于正文内容，该效果就已足够。但是对于链接元素来说还不够，还得添加不同层次的阴影特效，才能使链接更加突出。添加阴影的方法与前面的示例一样，只是在后面添加逗号，然后在逗号后面添加另外一个阴影特效。下面的例子给链接文本添加了浅蓝色的阴影效果。
　　现在添加一个属性来给整个页面一些亮点。通过伪悬浮动作(:hover)来实现链接的flash特效：
　　该属性设置使得在文本段落中的链接在鼠标悬停时呈现出黄色辉光。该特效如下图所示。
　　2.12.3工作原理
　　该方法是阴影特效的组合。可以通过将不同层次的阴影特效组合在一起产生逼真的3D效果。在此最好的方式就是应用不同的组合方式直到得到满意的3D特效。
　　2.13基于边框半径的圆角实现
　　在网页设计的世界中，弧形圆角一度被看做圣杯（Holy Grail）。它永远都是存在的，但是却很难实现。对于如何使得元素拥有弧形圆角，设计者们往往只能在有限且拙劣的方法中选择。
　　2.13.1准备工作
　　在CSS3的世界里，这些烦恼都不复存在。通过设置border-radius属性这样简单的方法便能给元素创建圆角特效。
　　2.13.2实现方式
　　首先创建一个HTML元素。该方法对于含有边框的元素均能生效。因此可以创建一个带有边框的文本段落，然后从http://lipsum.com获取一些填充文本。
　　接着设置CSS相关属性来修饰该段落元素：
　　为了实现圆角效果，添加CSS3中的border-radius属性。在本示例中，使用的弧度半径为5px。
　　设置该属性是一种实现圆角特效的简单实用的方法，对于页面上的浮动元素特别有效。但是如果只是想对菜单元素的顶部角落添加圆角特效呢？答案是，同样容易。
　　首先来看看一个简单的列表：
　　然后在CSS中设置列表为内联显示，同时设定其内边距及外边距。
　　在之前的示例中，所有的元素角都含有同样的圆角特性。为了能够让彼此之间有所区分，可以为每个特定的元素角设定一个半径。
　　同样也可以在CSS中为每个元素角设置其特有的属性，这也能达到相同的效果。
　　更进一步，还可以设置更多的弧度半径：
　　最后的页面显示呈现在下面的截图中。
　　用百分比设置圆弧半径是达到同样效果的另外一种实现方式。回到本方法中的第一个示例，改变CSS设置，用百分比取代之前的圆弧半径值：
　　2.13.3工作原理
　　属性border-radius提供了简易的绘制弧形元素的功能。该属性需要四个值，但是简写格式只需一个弧度值。