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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

异步社区 2017-05-02 16:25:00 浏览1444
展开阅读全文

本节书摘来自异步社区《众妙之门——网页设计专业之道》一书中的第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个“


”标签来实现的。

e581d48a07905c0f2f6eceb0d2e185f5214c66a5

Tapbots
当巧妙地将细节添加到简洁、简单和含义丰富的设计中时,CSS3就能发挥出最佳状态。Tapbots使用CSS3来得到圆角、鼠标悬停和一些透明效果,这些效果起初不容易发现。这是一个CSS3功能应用得当的好例子:没有加粗的、带阴影的标题,没有夸张的渐变和过多的动画,有的只是扎实的、优秀的设计。


f1d216a3a7c9b2dd325c0c48d358b7d04b256fe6

full frontal
文本阴影属性似乎特别有效果,尤其是当浅色的文本阴影被应用在深色的背景上时。这又是一个深色文本阴影(比背景稍微深一点)应用在白色的标题上的简单例子。此外,网页还使用圆角和盒阴影来处理每个发言者描述下方的快速链接。


2bf68c4aaa1ab1b9267ff96b90fc644472092078

going steady with stacey
有时候使用深色的文本阴影搭配浅色的背景效果也不错。但是在这种情况下,你或许想自己添加一个更“强烈”的文本阴影。


f970a33749c061ad7f9099637fe1ba418477844e

CSS3下拉菜单
一个更为实用的CSS3功能,即使用圆角、盒阴影、渐变和文本阴影处理多层次下拉菜单来达到良好效果。此处没有使用图像。


92257e7b1a3f4a84e668a33934f254683e40388a

Kristof Orts
Kristof Orts使用文本阴影属性来为标题添加深度。浮雕效果干净利落,使字体脱颖而出。


b3dae7ee80eb869a282ad26db1540c21857de4f1

CSS3 Experiments: Moon
Dan Cederholm已经准备了一个漂亮的CSS3演示来说明现今设计师可以在设计中使用的一些新功能。尤其请注意其边栏的微妙动画——CSS-transition
(转换)和CSS-animation(动画)。设计师为用户提供了更佳的视觉享受,创造了更多具有响应能力和参与性的交互。


1c7f5036db58d3c636bf0a6efb12f9fd905ed71a

Faruk Ates
Faruk Ates的博客是使用CSS3动画和转换来达到很好的鼠标悬停效果的实践范例。请注意在充满活力的蓝色背景上文本阴影的有效利用。


2ca42406e7f66867ec664a0687e0056039238da6

Mindgarden
Mindgarden使用了CSS3媒体查询来呈现在不同分辨率下的不同布局。使用宽屏浏览器窗口的用户会得到多列布局,使用小浏览器窗口的用户只会看到一栏。此外,图片的尺寸会根据用户屏幕的大小自动缩放。网页设计师多年以来一直使用JavaScript来达到这个目的,但是现在,我们可以使用基于CSS的解决方案来创建自适应布局。媒体查询是CSS3的扩展媒体类型,能够让设计师在站点渲染布局上有更多的控制。它们当前支持火狐浏览器3.6及更高版本、Safari 4及更高版本、Opera 10及更高版本,以及Chrome。不支持IE8浏览器。


80e3e93e37c49c07ab3bc3f8d614212d6fd4e303

Chirp
Chirp会议网站采用了CSS动画来得到演讲者照片的旋转动画效果。


b21db765c11b92faad79e8ae166a4375049a7da4

Bello and Proxima Nova: Type Experiment
在Tim Brown的试验中,他使用了渐变(gradient)、遮罩(masking)、圆角、转换和多背景图像。当鼠标悬停时,顶端的标题看起来与众不同。


99aaac08ea60e712e97de026caae0d50ab9714ca

Neography CSS3 Type Experiment
此处没有使用图片,只是单纯地使用CSS3转换、旋转、阴影和其他调整。


2af4164741908f6dd49e9ba75451126d7e633370

CSS Posters
设计师正在尝试使用不同的布局技巧和CSS3技术。这里的例子是用简单的CSS规则设计的。事实上,是一种使用@font-face的非常简单的字体嵌入方法。但是它看起来十分不错,并且很好地达到了其目的。


c8ede7e32b6b96f0b348d571cc2508398b465f3e

David Desandro:页脚
David Desandro在他的网站页脚使用了多种CSS规则。阴影、动画和转换都非常生动,色彩丰富且具有吸引力。这是大多数网站使用CSS3代码片段和微妙的CSS3技术的一个相反面。


70e5689d5dbb012518e12bdebad14d3be736de42

使用CSS的Opera Logo
在CSS3中,多种视觉效果的实现成为可能。带有一点艺术创造力,你可以创造出真正不平凡的事物。例如,此处Opera的Logo就是纯CSS3设计的:渐变、阴影和圆角。

3ad20c5de0e28a5cf3e3fde7d8e5630c04788e80

Rain Drop
该“雨滴”效果是又一个通过纯CSS3技术达到视觉效果的有趣例子。


23a580ca168dba39b19665416d453df49b248fe3

关于文本阴影令人遗憾的消息
现今,我们通过观察发现,在使用CSS3上存在一个普遍的问题,那就是在设计时使用CSS3只是为了好看。一个最好的证明就是文本阴影的过度使用,有时会被大量用于标题和正文。请谨记,CSS3是一个强大的工具,也是有效率的工具,但是很容易被滥用,造成新一轮的实用性和可读性问题。这似乎是个再明显不过的道理,但是仍然值得提及:CSS3添加到网站之前,确保只用来加强效果,添加的目的是为了美观和实用,而不是以牺牲实用性来达到美观的目的。一个明显而重要的规则是:你的设计不应该依赖于CSS3的改进,而是应该为用户使用现代浏览器融入丰富的附加层。先进的CSS3属性的不足之处是:由于它们尚未标准化,而且由于Gecko和Webkit需要专有的属性才能实现一定效果,在相当长的几年内,我们或许会以包含无用风格的相当臃肿的样式包来结束。因此,你可能会想要提取所有的CSS3增强的独立的样式表,以简化日后的维护。此外,谨记CSS3码应该总是由标准化CSS3规则结束(如圆角)。这样做的话,你可以确保在未来的几年,CSS3规则在新版本网页浏览器中得到更好的支持,实际上你的规则仍然要适应主流的浏览器。

Media Twitter
在Windows系统上,通过文本阴影设置的导航、标题、正文在默认的文本设置情况下会很难阅读。有时候实在没有必要使用文本阴影来处理正文、副本和导航部分,这样做会影响仍然使用旧版本浏览器的用户的阅读体验。


ff3b487c51c9c34c26f67830867e270903744785

Brandon Cash
Brandon Cash采用文本阴影属性处理其正文部分。尽管文字还是很清晰,但是比起纯文本,阅读起来还是困难得多。比较Chrome浏览器(左边)和Safari浏览器(右边)的视图,差异十分显著。很可能用户没有使用ClearType或其他任何版本的字体平滑工具。作为一名设计师和用户需求倡导者,你不得不考虑这个问题。


0054db7b744a4b90f6837b1b2d0b1c2418a3e712

网友评论

登录后评论
0/500
评论
异步社区
+ 关注