《众妙之门——网页设计专业之道》——2.3　快速适应CSS3

本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第2章，第2.3节，作者： 【德】Smashing Magazine 译者： 赵俊婷 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3　快速适应CSS3

随着主流浏览器对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技术的一个相反面。

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或其他任何版本的字体平滑工具。作为一名设计师和用户需求倡导者，你不得不考虑这个问题。