本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第2章，第2.3节，作者： 【德】smashing magazine 译者： 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。
随着主流浏览器对css3功能的支持和完善，设计界似乎对这一新的进展和发展潜力十分兴奋。每个人似乎都在尝试css3，无论是在rgba透明度、先进的css3选择器、css3变换或其他属性上。结果是令人惊讶的，我们见识到越来越多的网站比以前更加美观、先进、多功能、强大，并且阻挡了更多的讨厌的浏览器黑客。
到目前为止，最受欢迎的css3功能似乎是圆角（border-radius）、动画（animation）、多背景（multi-background）和盒阴影（box-sholow）。这点很容易理解，因为它能用来替换早期古怪的解决方案，可以用所需的工作区和第三方工具来执行任务。此外，@font-face正在迅速普及，但是请明确，它并不属于css3功能，因为它是被css2提出的，并且应用于早期的ie浏览器版本中（此后才是其他的浏览器——火狐3.5及以上版本、safari3.2及以上版本、chrome4.0及以上版本、opera10.1及以上版本）。这就是为什么现在你可以在设计中安全地使用@font-face。
现今最受欢迎的浏览器（如ie浏览器版本家族中的）只支持css3盒大小（box-sizing）属性。ie或ie8浏览器广泛支持css3属性选择器([att$=val]、[att^=val]等）和组合器(e~f)，但是不支持css3伪类(:nth-child()、 :last-child等）。ie9浏览器支持css3媒体查询、css3色彩 (hsl、hsla、rgba)、css3选择器和圆角。以前，通过纯css3设计似乎是不可能的，现今已经实现，并推动了设计界的创新思维。我们或许已经进入了资源丰富的网络新时代，当关键的css技术诞生后，如2003年～2005年时期，css精灵（sprite）和css滑动门也被开发出来。实际上，我们可以期待令人兴奋的创意时代的到来。
sxsw beercamp
在sxsw beercamp的设计中，创作者提出了一些十分大胆的想法。对于页面顶部的每一个字母，他们使用了49次文本阴影（text-shadow）属性。此外，还应用了各种动画和转换效果，以及盒阴影和hsla。顺便提及一下，你是否注意到顶部的日出效果？这一效果是设计师通过使用20个“
”标签来实现的。
tapbots
当巧妙地将细节添加到简洁、简单和含义丰富的设计中时，css3就能发挥出最佳状态。tapbots使用css3来得到圆角、鼠标悬停和一些透明效果，这些效果起初不容易发现。这是一个css3功能应用得当的好例子：没有加粗的、带阴影的标题，没有夸张的渐变和过多的动画，有的只是扎实的、优秀的设计。
full frontal
文本阴影属性似乎特别有效果，尤其是当浅色的文本阴影被应用在深色的背景上时。这又是一个深色文本阴影（比背景稍微深一点）应用在白色的标题上的简单例子。此外，网页还使用圆角和盒阴影来处理每个发言者描述下方的快速链接。
going steady with stacey
有时候使用深色的文本阴影搭配浅色的背景效果也不错。但是在这种情况下，你或许想自己添加一个更“强烈”的文本阴影。
css3下拉菜单
一个更为实用的css3功能，即使用圆角、盒阴影、渐变和文本阴影处理多层次下拉菜单来达到良好效果。此处没有使用图像。
kristof orts
kristof orts使用文本阴影属性来为标题添加深度。浮雕效果干净利落，使字体脱颖而出。
css3 experiments: moon
dan cederholm已经准备了一个漂亮的css3演示来说明现今设计师可以在设计中使用的一些新功能。尤其请注意其边栏的微妙动画——css-transition
（转换）和css-animation（动画）。设计师为用户提供了更佳的视觉享受，创造了更多具有响应能力和参与性的交互。
faruk ates
faruk ates的博客是使用css3动画和转换来达到很好的鼠标悬停效果的实践范例。请注意在充满活力的蓝色背景上文本阴影的有效利用。
mindgarden
mindgarden使用了css3媒体查询来呈现在不同分辨率下的不同布局。使用宽屏浏览器窗口的用户会得到多列布局，使用小浏览器窗口的用户只会看到一栏。此外，图片的尺寸会根据用户屏幕的大小自动缩放。网页设计师多年以来一直使用javascript来达到这个目的，但是现在，我们可以使用基于css的解决方案来创建自适应布局。媒体查询是css3的扩展媒体类型，能够让设计师在站点渲染布局上有更多的控制。它们当前支持火狐浏览器3.6及更高版本、safari 4及更高版本、opera 10及更高版本，以及chrome。不支持ie8浏览器。
chirp
chirp会议网站采用了css动画来得到演讲者照片的旋转动画效果。
bello and proxima nova: type experiment
在tim brown的试验中，他使用了渐变（gradient）、遮罩（masking）、圆角、转换和多背景图像。当鼠标悬停时，顶端的标题看起来与众不同。
neography css3 type experiment
此处没有使用图片，只是单纯地使用css3转换、旋转、阴影和其他调整。
css posters
设计师正在尝试使用不同的布局技巧和css3技术。这里的例子是用简单的css规则设计的。事实上，是一种使用@font-face的非常简单的字体嵌入方法。但是它看起来十分不错，并且很好地达到了其目的。
david desandro:页脚
david desandro在他的网站页脚使用了多种css规则。阴影、动画和转换都非常生动，色彩丰富且具有吸引力。这是大多数网站使用css3代码片段和微妙的css3技术的一个相反面。
使用css的opera logo
在css3中，多种视觉效果的实现成为可能。带有一点艺术创造力，你可以创造出真正不平凡的事物。例如，此处opera的logo就是纯css3设计的：渐变、阴影和圆角。
rain drop
该“雨滴”效果是又一个通过纯css3技术达到视觉效果的有趣例子。
关于文本阴影令人遗憾的消息
现今，我们通过观察发现，在使用css3上存在一个普遍的问题，那就是在设计时使用css3只是为了好看。一个最好的证明就是文本阴影的过度使用，有时会被大量用于标题和正文。请谨记，css3是一个强大的工具，也是有效率的工具，但是很容易被滥用，造成新一轮的实用性和可读性问题。这似乎是个再明显不过的道理，但是仍然值得提及：css3添加到网站之前，确保只用来加强效果，添加的目的是为了美观和实用，而不是以牺牲实用性来达到美观的目的。一个明显而重要的规则是：你的设计不应该依赖于css3的改进，而是应该为用户使用现代浏览器融入丰富的附加层。先进的css3属性的不足之处是：由于它们尚未标准化，而且由于gecko和webkit需要专有的属性才能实现一定效果，在相当长的几年内，我们或许会以包含无用风格的相当臃肿的样式包来结束。因此，你可能会想要提取所有的css3增强的独立的样式表，以简化日后的维护。此外，谨记css3码应该总是由标准化css3规则结束（如圆角）。这样做的话，你可以确保在未来的几年，css3规则在新版本网页浏览器中得到更好的支持，实际上你的规则仍然要适应主流的浏览器。
media twitter
在windows系统上，通过文本阴影设置的导航、标题、正文在默认的文本设置情况下会很难阅读。有时候实在没有必要使用文本阴影来处理正文、副本和导航部分，这样做会影响仍然使用旧版本浏览器的用户的阅读体验。
brandon cash
brandon cash采用文本阴影属性处理其正文部分。尽管文字还是很清晰，但是比起纯文本，阅读起来还是困难得多。比较chrome浏览器（左边）和safari浏览器（右边）的视图，差异十分显著。很可能用户没有使用cleartype或其他任何版本的字体平滑工具。作为一名设计师和用户需求倡导者，你不得不考虑这个问题。