2010年网页设计趋势：现实生活中的隐喻和CSS3的适应

      现代的网站有很大的优势，如灵活性，跨浏览器的兼容性和个性化，但他们也变得越来越简单和直观。这样做，是通过微妙的可用性增强应用程序，无论是从网络本身或离线交互系统绘制。在今天日益复杂的网络，而互联网的使用越来越简单。

     在这篇文章中，我们将探讨一些新的设计方法和技术，你可能想开发自己的项目。我们将目前的不寻常的或非常规的设计方法，并尝试了解什么是真正对他们感兴趣的，我们如何将它们应用到现代的网页设计。更具体地说，我们将讨论以下内容：现实生活中应用到网页，隐藏的复杂，微妙的互动，上下文敏感的导航和快速适应对CSS3的隐喻。

1。现实生活中的隐喻和隐藏的复杂性

也许现代Web应用程序和服务的最显着特点之一是，他们提供丰富的用户体验。用户在这些系统之间的互动变得非常简单，直观，甚至“人。”但这种直觉意识并不仅仅从良好的视觉设计或更好的传统原则的适用来的信息架构。我们已经看到更多的Web设计中的设计元素或模仿现实生活中的隐喻或隐藏，让用户进行选择的复杂性更有限，更简单的决定。

按钮 是第一个发展的良好范例。在今天的网页设计，按钮的外观和互动就像在现实世界中的按钮的用户。按钮往往显得非常现实的。他们站出来，有鲜明的色彩，而且非常敏感：当超过或点击一个按钮，用户就徘徊，他们也经常是视觉反馈。如果您在形状方面比较有（自动柜员机按钮这些按钮，颜色和响应），你会发现一些惊人的相似之处。

预示 是一个关键的本土设计元素的质量。它指的是一个对象或环境，允许用户执行某些操作方面。正如在他的著作“日常琐事的设计唐纳德诺曼指出，”赋提供有力线索事物的运作。当预示采取利用，用户知道该怎么做，只要看看：没有图片，标签或指示要求。越是熟悉的设计元素在页面上看起来，就越容易为用户与它相关联的一些具体的实际应用程序或任务。

这种做法并不只涉及到号召性动作按钮：当你将看到下面，它反映的是，适当的比喻来表达的意义和一般的某些设计元素的目的。显然，这种方法降低了用户交互的复杂性。另一种方法来实现这一目标是通过最大限度地减少元素的外观，或者更准确地说，给他们一个不同的环境，还是减少在页面上的视觉重量。

越来越多的网站变得过时，笨拙，无法使用与陡峭的学习曲线摆脱接口。查找出直观的，本土的隐喻。例如，滑块，有时会比一般选择更好的工作领域（如显示的预算和时间框架）;切换的开关旋钮，可能更适合比复选框和复杂性可以被隐藏，以简化用户交互。现代Web应用有吸引力的，直观明了。

现实生活中的隐喻

弗雷德佩里
弗雷德佩里的电子商务商店有一个现代和优雅的外观，传达品牌的关键特性非常好。每一个样式是作为一个在墙上的海报，而不是像普通的商店，但气氛是相当熟悉的用户。一个现实生活中的比喻非常规但有趣的应用到电子商务网站。

和C. L.霍洛韦
一个由康迪斯霍洛威类似的方法。她额上的“墙”，她的作品;水平导航是一个通过一个艺术画廊漫步比喻使用。

滴水脂肪
这款T -恤衫商店上使用机库的衣服现实生活的隐喻。这是一个不错的主意，如果您没有在您的商店的项目太多，但如果你有困难的数百种产品。

Gowalla
而不是显示的功能在应用程序的名单或解释它如何在一个录像作品，Gowalla显示一个例子，它使用真实生活场景来解释该应用程序。用户在几秒钟内得到的想法。插图可能不完美的，可能看起来有点不一致，但他们所服务的重点。为充分说明认为，在图像上点击以下。

XHTML的咖啡馆
XHTML的咖啡不承担与无生命的促销内容块的用户：相反，它适应一个很好的现实生活中比喻的形象。有吸引力的，令人难忘。

CulturedCode：状态
该名单上的文化代码开发者在他们的状态页面航班到达他们目前的任务。列表中的每个项目都有一个描述，派出会员和地位。这些经典的设计类似于一个航班表在机场经常见到。一个有趣的使用方式为Web设计的实际生活中的比喻。它不会工作在每一个方面，但它非常适合在这里。

Builditwith.me
虽然这个网站可能会先看看有点普通，什么有趣的是在右上角的区域切换开关。基本上，它是一个复选框，用户可以选择是否对他们的人应该已经有了一个好主意寻找。但是，而不是使用传统的复选框，设计者决定一个切换的开关旋钮。虽然这可能是一个在总体上是好的想法，目前还不清楚，如果这个工程。它实际上可能刺激用户谁假定它是一个滑块。这种相互作用的经验是不同的比你得到一个滑块，和相当类似于一个开关。

哦！媒体
其中一项有吸引力的，突出的，有光泽和可点击的按钮的例子很多。小图标按钮的右边是一个行动或进展很微妙的比喻，难以察觉，但它的作品。简单而引人注目。

苹果
iPhone的用户界面有一个简单的通断其喜好开关。这个比喻是类似于许多现实生活中对象的按钮，是打开和关闭一个简单的开关设置。直截了当。

隐藏复杂性

SlideDeck
幻灯片是由本质上是一个不错的方式来隐藏复杂性，因为他们在一个紧凑的重组互动区多个信息点。 SlideDeck是一个设计解决方案，集成到一个元素的横向和纵向滑动导航很好的例子。布局是干净的，并提供了很好的概述可用的功能。

诺索特罗斯
诺索特罗斯有一个有趣的和非常规的导航方法。它非常巧妙地减少，减少导航唯一有意义的图标的复杂性。该博客页面已为6个图标的导航选项的博客服务。有一次，一个用户点击图标，选择该类别，为其他类别的图标消失。这将是有趣的工作，这种做法是否会在更大的规模。 Calicott 采取了类似的做法，尽管有不同的设计。

Gmail的
密切关注小事情可以有更直观和本地的用户体验。如果你正在编写一个在谷歌的电子邮件服务的电子邮件和附加一提，你是一个文件到你的邮件，但别忘了它附加，系统给你点了一个友好的警告信息。这是一个拥有用户的最佳利益为依归的应用很好的例子;之间的良好和优秀的Web应用的差异。如果你想允许稍有夸张，你可以比较这一个客户到邮政办公室走路一包，经过短暂的分心的友好工人提醒客户发送包了。

KBB
KBB，为寻找和销售新车和二手车资源，提供了一个原预先写好的电子邮件模板零售业主。如果用户有兴趣，他们可以输入他们的第一个和最后一个名字，街道地址和电话号码，一键发送电子邮件。当然，可定制的信息。这是一个Web应用程序的繁琐任务需要仔细照顾的好榜样，提供了一个简单的一键解决用户。

Moof
Moof需要与联系方式类似的方法。目前还不清楚是否增加或减少其方法的转换率，那将是很有意思，就这一个可用性测试。

Livestream
许多Web应用程序有一个定价方案和特性一样，Livestream。这种设计，不过，该计划将明确传达适合特定类别的用户最好的。公告所附的帮助工具提示“流”功能，并在该表底部的红色缎带。黄色的按钮响应，也提供视觉反馈。一个简单的，有吸引力的设计。

值得注意的应用：定价表
突出最流行的计划是个好主意，因为这有助于使用户无需检查整个表的决定。这是一个利用社会验证比喻很好的例子：当用户在社交场合，他们会寻找其他人来看看如何做人。这不是一个自觉的过程，但它可以帮助我们来正视困难的决定。

Mailchimp
为什么用的功能，而不是让用户简单地做出他们的决定基于应用程序的最重要的特征显示几十个几十个计划？ Mailchimp允许它的用户只选择通过选择其用户数在每月的计划。所有其他的定价计划可用，也不过是背后的复杂性小“查看所有价格计划”链接大多数用户隐藏。这可能是不可避免的举措，因为Mailchimp已字面上与组合数十个品种的定价方案：展示他们一下子将作出选择太困难，导致一些用户决定瘫痪。

单一登录和注册
降低复杂性，是一种合并为一个单一功能的多个相关的功能简单的解决办法。例如，而不是两个单独的联系，并为登录并签署了网页，您可以为用户提供一个单一的“登录或马上注册”按钮，同时为目的。将更新的形式通过JavaScript后，用户选择一个单选按钮。对于这种形式登录，请注意，“提交”按钮说：“登录”，并有一个链接，找回丢失的密码。对于注册的形式，为密码字段标签提示用户“选择一个密码”和“注册”，并接受服务条款。

另一种方法是提供两个输入域，标记为“电子邮件”和“密码”，然后提出一个“还没有帐号吗？注册了！“链接旁边。这两种方法将工作的优良新访问者和回访。

Quiksilver的
Quiksilver的要求其潜水衣客户提供关于其重量，高度，风格和功能的信息第一。而不是显示的几十个可供选择，它为用户搜索过滤器，只显示那些项目，目前已经上市，符合用户的个人资料。一个隐藏不必要的信息和对重要的东西集中很好的例子。

2。微妙互动

虽然往往是相反的主张，我们认为，闪存有它在现代网页设计的地方。今天，我们观察之间的HTML / CSS的网站和Flash网站的关注明确分工。虽然HTML / CSS的已成为事实上的基于文本的网站标准，对信息消费为重点，Flash是支配其广泛的视觉和音频效果和丰富的用户交互娱乐和多媒体网站。

但是，这并不意味着，HTML / CSS的网站仅限于平原，单纯的用户交互。事实上，相反的，似乎是真实的。我们看到更多的HTML / CSS的网站越来越互动，好玩的，引人入胜。更多动画是被用于视觉反馈（例如，在鼠标悬停和点击次数）和视觉效果正在为一个更敏感的用户体验使用。当然，这些影响依赖于JavaScript库，它在后台燃料的互动层。

尽管如此，基于CSS的网站设计者倾向于避免极端的交互性，而使用微妙的，精致的影响甚少。其设计使用的交互性，支持用户以惊人的互动和推卸三维效果和通航建筑物绝大多数用户的不便。

CoTweet
CoTweet有一个干净的，有吸引力和响应按钮很好的例子。虽然悬停效果是微妙的，点击相应按钮是惊人的。注意在大小和文本的“注册”和“了解更多”按钮色差。还要注意的醒目色带上的“向上”的形式，其中突出的标志，但并不突兀。这可能是一个非常微妙的变化，但加入小图标的号召性词语按钮可以是非常有益的：例如，加一个锁图标（出于安全的比喻），以沟通，在认为是安全的日志。

WeightShift
WeightShift需要通过展示一个更加互动的方式在其导航选择一个有趣的设计方法。最近的工作是显示在一个中心的布局突出的信息框，与有相关图片的背景。当用户从一个项目到另一个导航，背景的变化，也。请注意，该信息框是半透明的，一个好的设计技术。

贾克斯葡萄园
第1部分中，我们展示了这个网站，但它完美地演绎了本节的点，也。此酒店网站有一个有趣而独特的水平导航，这是您开始浏览时触发的葡萄酒目录。无论是背景图片和幻灯片的说明葡萄酒水平。简单的CSS和JavaScript的使用。一个美丽动人的设计。

费尔勒彼得
费尔勒最近重新设计是非常性感。友情链接，内容块和插图巧妙地作出反应，鼠标悬停在不同的方式：不同的透明度，动画，突出环节，改变背景图像，衰落到另一种颜色，显示评论或修改导航。设计是非常邀请，参与和响应。费尔勒的设计也使用键盘导航，网页设计中的另一个产业的共同发展 我们谈到了在第1部分。手下来，一个美丽的一流的设计。

燃料公司品牌
官方网页的燃料品牌公司有一个漂亮的动画种类：图像上悬停规模的增加，改变背景图片，幻灯片是用于导航和交互式工具提示和其他效果是显而易见的。互动性似乎与官方公司网站受欢迎。

马尔科姆读顾问
另一种微妙的互动有趣的设计技术：三个图像自动显示在顶部垂直滑动，更新在顶部横向导航的背景图片，也。不支持Flash是用在这里。

LifeGear样机
一个模拟的一个互动产品页面。许多电子商务的网页正在得到更多的互动产品展示，太，例如，360度全景或像这样的一个互动的指示。

Carsonified：100件
Carsonified集成了一个微妙的色彩过渡和淡入出效果迅速显示有关本次会议的发言者的信息。

和谐共和国
在这里，我们有互动悬停效果和丰富的字体，而且管理和笨拙的文字，因为该网站的加载时间长的闪光的性质。这个网站可以很容易地被设计与纯JavaScript，可以更好地复制和粘贴文本的，灵活的字体大小和本地的鼠标交互（即从指针更改为手工上的链接悬停）。很抱歉，但Flash不属于这里。它比较属于 这里例如。

弧90：我们的团队
然而，另一个是“关于”互动网页设计元素的例子。照片取代悬停：但游客还可以轻松地过滤他们的队员占领。图片过滤掉褪色为灰度。

S的P D
另外一个不错的微妙悬停效果。在这个组合的页面，每个项目填写一个细胞。标头有18个在所有细胞。当用户超过一徘徊，它扩展到填补地区的6个相邻的单元格，显示有关选定项目的补充资料。在这里没有使用Flash。一而再，再而微妙的互动是相当有帮助。

Duplos
人们可以采取进一步的互动一点也。在里卡多梅斯特的组合，设计元素慢慢浮整个页面。你能现场危险Twitter的小鸟怪物？当然，没有Flash是用在这里。

亚历布嘎
亚历克斯的设计去走极端。该网站是建立与CSS和JavaScript，但它也同样可以被用Flash设计的。几乎所有的设计元素有一定的动画排序。大多数设计师不去这种极端手段提供互动性。一个非常有趣和巧妙构思执行，虽然。 （走出去，甚至更远，有时甚至 徽标是用jQuery动画。）

3。上下文敏感导航

上下文敏感的导航的本质是导航（通常附加到主导航），关于在网页上取决于用户上下文（例如，他们在做什么）。它的最大优点是它可以消除干扰和控制无关的用户的当前上下文。上下文敏感的导航显示选项只有在用户实际需要它们。显然，这种模式将是特别有用的用户界面设计：它能够帮助解除杂波接口和重点任务，他们正在执行用户的注意。

这种方法已用于在Web开发多年，但是从我们的观察，它是更多的网站和Web应用程序今天出现。 Vimeo 是一个上下文敏感的导航经典的例子：回放控制消逝一旦开始播放视频和再次出现的需求（即当在视频领域徘徊的用户）。

当执行上下文敏感的航行，确保实际可用的导航当用户需要。记住各种设置和用户方案，测试在最坏的情况了。对于视频播放控制，如iPhone的触摸界面或ipad公司用户（用户）将无法切换导航因为悬停效果将无法使用。在这种情况下，您可能要考虑触摸手势代替。

Vimeo
Vimeo，视频分享平台，显示播放控制，直到用户开始观看影片。当播放视频时，控件消逝，只有当再次出现在影片的用户徘徊。一个上下文敏感的导航的典型例子。这种导航正在使用其他播放的网站越来越多，太 - 例如， Blip.fm。

纽约时报
纽约时报巧妙地显示相关文章，并在其特色故事。而不是促进他们的文章的实际内容，它们的设计者提出一个适当的范围内：1块幻灯片的右下角，当用户到达该文章的末尾：在方便和帮助。可用性研究将确定用户是否觉得这种行为从长远来看恼人。此外，请注意，只要你在一个除了链接的文章（点击单词），一个“？”工具提示出现允许您查找所选单词。这项服务更有道理，如果在这比它在导航菜单隐藏在顶部或侧栏背景下提出的。上下文敏感的导航处于最佳状态。

路透社
下拉式导航是另一种上下文敏感的导航共同的地方。路透社的下拉式导航是相当先进的。它不仅提供对导航的选择，但目前还显示，如股票和热点问题，这是立即发现有用的信息。还要注意“打开在右侧栏没有显示在下面的截图（”按钮）。当它被点击，一个详细的信息框（最初隐藏的，但在要求立即可用）覆盖当前页面，并显示相关信息（见第二下面的截图）。路透社还允许用户按照自己喜爱的主题并保存供日后阅读文章。个性化的确是未来的网络。

信息建筑师
信息建筑师有一个互动和有益的搜索功能。当用户键入一个关键字，系统搜索并显示结果，强调在文章的摘要关键字。而不是显示在下拉菜单的方式，例如谷歌的网站（或选择的关键字，例如， GetSatisfaction）这样做，该网站为用户提供即时的结果。好用的快捷方式，节省了时间。顺便说一下，在搜索框不只是出现盲目与其他所有链接，它是在“章程”的网页上显示的档案，当用户浏览和搜索最近或特定的文章。

AllTop
而不是显示默认的数十个门类，Alltop显示需求时，在右上角的信触发它们。另一个隐藏在一个方便，用户友好的方式辅助信息的一个例子。

DailyMile
DailyMile有一个干净和有吸引力的用户界面。主要的导航选项都显示在左侧边栏。当用户超过一徘徊，显示一个提示，说明该链接。在其他Web应用程序，它可能是有用的强调导航选项和显示悬停第二选择。还要注意“更多在侧边栏底部的”开关，提供辅助导航选项，这是仅当用户正在积极寻找这些选项，而是隐藏其他。

黑港
默认情况下，这里的图像部分不显示任何内容比实际图像等。但是，当用户对图像的徘徊，标题，描述和评论的出现。公告“共享”在右上角的气球？论悬停（并且只在悬停），它幻灯片到Twitter的，脸谱，Digg和StumbleUpon公司联系。所有这些信息将显示在特定的区域时，在特定情况下（鼠标悬停），它消逝时自动将鼠标移开。

进一步阅读与资源

看如何在未来数月上下文敏感的导航变化和年会非常有趣。我们可以期待更清洁，干净整洁的界面，根据用户的意图和行为上的需求出现在元素。 聪明的导航和任务栏 和用户为中心的Web应用将更加注重用户的实际投入。

• 悬停的CSS控制的iPhone
  iPhone拥有一个触摸屏，所以你不能真正悬停在任何东西，但这里介绍的技术仍然工作。而不是徘徊，用户点击该控件显示在一个地区。这一地区是一个链接，或者内联或块（1块链接效果更好，因为你可以使可点击区域较大）。
• 触摸手势参考指南
  本指南包含了软件设计和触摸式用户界面开发工作组独特的资源。

4。快速适应对CSS3

随着提高现代浏览器的主要特征对CSS3的支持下，设计界似乎很关心新的进步和可能性感到兴奋。每个人都似乎与对CSS3实验中，无论是RGBA的透明度，对CSS3选择器先进的，对CSS3转换或其他属性。其结果是非常令人振奋的：我们所看到的更少讨厌的浏览器黑客，更美丽，先进，灵活和强大的设计比以前多。

最流行的对CSS3的功能似乎是迄今为止 边界半径，动画和多种背景 箱阴影。这是可以理解的，因为这些可以很容易地被用来取代先前的解决方案，需要离奇的变通办法和第三方工具来执行任务。此外， @字体面对面 正在迅速普及，但请记住，这不是一对CSS3功能，因为它提出了CSS2中，被幸运地在Internet Explorer（以及在其他浏览器的早期版本后才实施 - 法郎3.5 +和Safari 3.2 +，铬4.0 + ，歌剧10.1 +）。这就是为什么它实际上安全使用 @字体面对面 今天在您的设计。

与对CSS3坏消息是，为了使功能可以很容易地适用于所有主流浏览器，我们将不得不等待的Internet Explorer 8期满。它如何还有待观察以及实际的互联网浏览器9将支持新的标准（你可以看一下CSS支持在Internet Explorer中第9页 互联网浏览器9：测试驱动）。今天最流行的浏览器（即家庭的Internet Explorer版本）只支持对CSS3盒大小的属性。的Internet Explorer 7 / 8有广泛的支持对CSS3属性选择器（[交通运输技术$ =瓦尔]， [交通运输技术^ =瓦尔]等），combinators（é〜f与），但没有对CSS3伪类的支持（：n个孩子的（）， ：最后的孩子等）。互联网浏览器9（将在2010年底公布的最早）将至少支持对CSS3媒体询问，对CSS3的颜色（HSL的，低合金高强度，的RGBA），对CSS3选择器和 边界半径。在此期间，我们将不得不使用现代浏览器为IE对CSS3和整合的解决方法，并有 他们中很多。

事情似乎是不可能在一年前，我们正在实施与纯对CSS3，由设计界的创意燃料。我们可能已经进入了网页设计，关键技术的CSS时正在诞生，类似于2003年到2005年时的CSS精灵和CSS滑动门制定了肥沃的新时代。事实上，我们有一个令人兴奋的创意几年期待。

的SXSW Beercamp
为了的SXSW Beercamp设计，创作者提出了一些比较大胆的决定。在每一页的顶部信中，他们使用的 文本阴影 物业49倍。此外，各种动画和转换都适用，有 箱阴影 和HSLA。顺便说一下，你有没有在顶部日出？那么，设计师使用20

Tapbots
工作时，最好对CSS3功能巧妙地应用与细节，加上一个清洁，简单，有意义的设计。 Tapbots使用对CSS3的圆角，悬停动画和一些透明效果，这是很难找的第一眼。这是一个很好的例子是对CSS3功能正确适用：没有大胆的头条新闻 文本阴影不夸张的梯度，没有过多的动画 - 只有固体，良好的设计。

2009年全正面
该 文本阴影 财产似乎特别有效的文本时，光的阴影里的人是黑暗的背景下使用。这是一个黑暗的另一个文本阴影简单的例子（1位比背景暗）在白色的标题使用。此外，该网页使用 边界半径 和 箱阴影 根据每一位发言者描述中的快速链接。

要稳定与斯塔塞
但有时一个黑暗的申请 文本阴影 对一个浅色背景的作品也很好。但在这种情况下，您可能需要添加一个“强大”的文字阴影。

GigaOm等
千兆奥姆用户的RGBA透明度的特色街区。

下拉菜单对CSS3
一个更实用的方法，对CSS3的功能，使用 边界半径， 箱阴影，梯度和 文本阴影 在一个多层次的下拉菜单中，效果良好。没有图像用在这里。

克里斯托夫奥茨
克里斯托夫奥茨使用 文本阴影 财产增加其深度的头条新闻。压花效果的清洁和锋利，帮助排版突出。

精明的条例草案
安迪克拉克的设计反应定价列和按钮。他用 箱阴影， - WebKit的梯度 为梯度，为不透明的RGBA， 边界半径 为圆角，和Webkit动画悬停效果

Colly.com
西蒙科利森使用 箱阴影 财产给予更深入的列在他的布局。

对CSS3实验：月球
丹塞德霍尔姆编写了一个很好的演示，说明对CSS3的一些新功能的设计师在设计中可以利用今天。特别是，在侧栏的通知微妙的动画。 CSS的转换和CSS -动画使用。该设计提供了很好的视觉回报用户，创造一个更加敏感和参与互动。

沙雷茨
沙雷茨'博客是一种使用一个不错的悬停效果的动画和过渡对CSS3的实际例子。注意有效地利用 文本阴影 一个充满活力的蓝色背景。

Mindgarden
Mindgarden使用查询对CSS3媒体在不同的分辨率显示不同的布局。有广泛的浏览器窗口大小的用户可以得到多列布局（2或3列，看到第一个画面），和一个较小的浏览器窗口的大小用户只能看到一列（第二屏幕）。另外，图像的尺寸按比例自动根据用户的屏幕大小。网页设计者已经使用多年的同一目的JavaScript，但现在我们可以创建使用纯粹的CSS为基础的解决方案，自适应布局。传媒查询一对CSS3扩展媒体类型，让以上的站点布局呈现设计师更多的控制。目前，他们支持在Firefox 3.6 +和Safari 4 +，10 +歌剧和铬。 Internet Explorer 8中不支持他们。对于有关媒体对CSS3疑问，头部到解决办法，并进一步资料 拉斯威克利的演讲“对CSS3媒体查询”。

噪
啁啾会议网站使用的轮换和发言者的图像动画CSS动画。

贝洛和比邻新星：形式实验
对于他的实验，添布朗使用渐变，掩蔽，圆角，转场和多个背景图像。上徘徊，在顶部的标题似乎脱颖而出。

NeutronCreations
美丽在工作中对CSS3的版式和变换在这里。旋转的圆圈，作为公司的名称将显示。

Neography型实验对CSS3
没有图片是用在这里。纯对CSS3转换，旋转，阴影和其他改动。

CSS的海报
设计人员正在试验不同的布局技术和CSS3技巧。下面是一个CSS规则简单的CSS海报设计的例子。其实，一个很简单的技术，它使用@字体，字体嵌入的脸。但它只是看起来伟大和服务的目的，太。

大卫Desandro：页脚
对CSS3疯了：大卫Desandro使用在其网站页脚各种对CSS3规则。阴影，动画和过渡都非常生动，丰富多彩，有吸引力。这是对与对CSS3，大多数网站使用的微妙片段对CSS3的影响正好相反。然而，在这种情况下它工作良好，因为它完全不同于其他网站的设计除了产品组合。

歌剧与对CSS3标志
不同的视觉效果可能与对CSS3。随着艺术创作位，您可以创建真正的不平凡的事。例如，歌剧院标志设计在这里纯粹是对CSS3：梯度， 箱阴影 和 边界半径。 CSS的形状是什么，我们应该想到会快？

赖恩德罗普
另外一个有趣的例子实现的视觉效果与纯对CSS3。

一个关于文本阴影悲哀的财产

一个普遍的问题，我们通过观察对CSS3有今天，是设计制作的出现，为的只是为了对CSS3。一本是完美的过度使用说明 文本阴影 财产，有时是大量应用于标题和正文。记住，对CSS3熊是一个强大的工具，因为它可以作为有效的，也可以很容易被滥用，导致了问题的可用性和可读性问题的新一轮谈判。这看起来是一个非常明显的意见，但它仍然值得一提：前增加了对CSS3功能，您的网站，请确保它实际上是一个增强，为美学而加 和 在成本的可用性可用性，而不是美学。

一个明显而重要的规则涉及到这样的：你的设计不应该依赖于对CSS3的改善，而应结合起来，作为丰富的现代浏览器的用户与它们的附加层。采用先进的缺点是，对CSS3属性，因为他们还没有规范，因为壁虎和Webkit需要专有的属性，实施几年一定的，我们最终可能相当臃肿的样式表中包含无用的风格了。所以，你可能要提取全部专有增强对CSS3到一个单独的样式表，以简化维护以后。另外，请记住，您总是对CSS3栈应该结束了对CSS3标准规则（如 边界半径，不 -万盎司边界半径）。通过这样做，可以确保在未来几年，为在新版本的Web浏览器对CSS3规则更好的支持，您的规则仍然适用，将实际工作中的主要浏览器。

Twitter的媒体
在一些Windows系统，导航，标题及正文设置 文本阴影 可以是相当困难的阅读与默认的文本设置。有时实在没有必要使用 文本阴影 身体复制和导航，从而影响与旧版浏览器的用户设计的质量。

廷德
廷德使用 文本阴影 物业文本。有些用户（即使有良好的视力者）可能会遇到困难他们的屏幕上阅读这个文本。

布兰登现金
布兰登现金使用 文本阴影 他的身体财产副本。虽然文字是清晰，更难以阅读，如果它是比普通的副本。比较中铬（左）和Safari（右视图）：差异显着。这很可能认为很多用户不使用ClearType字体或任何为其他类型的文本平滑。作为一个设计师和用户的需要提倡，你要记住这一点。

Sramekdesign
淡蓝色的浅灰色的背景文本很少清晰。随着白色的文本添加到文本的影子，它变得更加恶劣。很抱歉，但是这不是地方 文本阴影 应适用。

结论

新的可能性总是创造性地实施，但如此时髦，他们也被滥用。虽然良好的设计做法正在被纳入网络设计迅速通过现实生活的隐喻，响应界面和上下文敏感的导航（），我们已看到许多“过度设计”的网站，使用他们自己而对CSS3的新功能。

设计趋势不存在应遵循的。其存在是为了被打破，重塑和由社区荡漾通过设计创新精神取消。从本质上看，趋势是好的，但什么：他们忽略了通信设计的主要目的，破坏美学和功能之间的平衡。而不是跟随潮流，使用权为目的，适当的范围内适当的工具。这就是信息设计的魅力在于，它使之间的一个不错的设计和一个不错的和巨大的差异 可用 设计。