感受CSS3强大魅力！50个精选案例欣赏（上篇）

福利来咯！本期节目我们为大家整理了50个展示CSS3魅力的优秀网站，一定会让你大开眼界。记得启用高级浏览器欣赏。在这个CSS3和Html5风靡的年代，这些优质的资源更显得弥足珍贵，具有极高的研究价值！有了CSS3，你确实能够化腐朽为神奇，而且最新版本的CSS3在众多浏览器都有良好的兼容，甚至是万年不变的IE！在技术方面，CSS3的字体、图片较前几个版本都有了长足的进步。话不多说，赶紧收藏！

相关推荐：
《网页设计的3秒法则！打造出众的第一印象》
《让阅读更时尚！25例杂志风格网页设计》
《应该怎么做？网页设计师才不会落伍》

01. Envoy

CSS转换功能被用在了这个网页上Envoy，这是一个办公室访客登记软件，界面仿ipad，里面可以填写的信息有姓名、签名以及留下的痕迹。除了网页版，它还提供手机或者平板App。

这款软件初始的目的是告诉主人，客人在自己的办公室里做了些什么，进行了哪些操作。 为了实现这一目标，这个网站使用了app的功能，屏幕也是模仿ipad，当你滑动页面时，它会自动更新，CSS转换的作用就在此。

"我们花了很长时间去处理细节问题，并且为自己的设计感到十分满意！"网站联合创始人如是说。

02. O Music Awards

Happy Cog使用了CSS很多功能，才做出了上面这个页面。MTV为第四届网络音乐节建立了一个新网站，由Happy Cog操刀制作，这个网站运用了很多不同的CSS功能，并将它们整合到一起，最终得到这样的效果。

"我们的设计充满活力且独一无二，在使用CSS时，我们勇于创新，独辟蹊径，用了很多平时不被允许的点子。"工程师Stephen Caver如是说。

在这个网站中你能看到CSS的加强功能，如渐变、转换以及透明度等。比如它的圆形头像周围设置了边框，后面很巧妙的搭配了一个弧形，极具现代气息。 同时这还是个响应式网站，即使某些页面的布局非常复杂。"在制作时确实有些图层放置问题很棘手，不过将这些本来未知的问题KO的感觉也是非常好的~"Caver如是说。

03. SquareSpace

在SquareSpace中，CSS变换和动画功能被用来加强设计和交互。Squarespace 是一个强大的、一站式网页，有很多定制的选项，让用户能自己制作独一无二的模版，加上有趣的导航。

"Squarespace的设计团队在设计现在的导航前，还尝试过其他的样式。我们最终还是舍弃了前面几个设计，因为现在这版允许我们将几个链接放在一起，而不是分散到整个页面。"前端工程师Kenneth Cachia如是说。

CSS变换和动画被用来加强设计和交互， 漂亮的Hoefler & Frere-Jones字体被用来吸引人们的注意，Cachia说这个网站集"干净的页面、字体、图标以及引人注目的图片等细节之美于一体。"

04. Rent.com

Rent.com一个US公寓租赁网站，使用了分离的CSS文件，IOS、BlackBerry以及Android均可下载使用。

在听了Scott Jehl关于RWD的讲话之后（Filament Group），公司决定对网站进行重新设计。更新版是一个非常易于使用的响应式网站。

"从设计的角度来看，我们将重心放在了图片和中心文字上，底层有大幅房间缩略图，点进去之后会显示更多图片。"Todd Parker如是说。

这个网站的设计很简洁，像刚摘下来的黄瓜一样清新，很好的利用了白色空间。一个合理的设计可以将用户的目光集中在你想要表达的内容上，这对于房屋租赁网站来说非常重要。 在网站中你还会发现极妙的CSS渐变、透明度以及动画设置。

05. MoreSleep

MoreSleep，一个 Berlin创意代理商，网站像血管一样。

"我们的目标就是通过网站有选择性的展示三个能代表我们专业知识的项目。"技术总监Torsten Bergler如是说。 大大的字体，整洁的滚动效果，对比性极强的亮红色这些设计让整个网站从众多候选者中脱颖而出。

"独一无二的这个作品所表达的含义，想象一下，这些错综的血管一步步指导着用户了解我们的故事，这是一件多么了不起的事情。" CSS转换工具让页面和内容之间的转换更加顺滑，背景大小调整功能被用来控制不同尺寸下的图片缩放效果。

06. Thankful Registry

Thankful Registry是一个为新婚夫妇准备的网站，在这里夫妇可以写下一个独一无二、有个人特色的婚礼登记表，可以是任何他们想要的东西。网站由Crush + Lovely制作，Jeff Schram和Michael Phillips是网站的前端工程师，他们希望CSS能像ps设计一样漂亮，所以花了很多时间仔细计划了SCSS结构。

"我们制作了一个响应式系统，你可以滑下整个页面来显示主要导航选项，这种设计让我们能够将目光集中在美丽的图片中，同时也给了用户独一无二的响应式体验。" Schram如是说。

07. The Brackets

United Pixelworkers和Dribbble联手制作了The Brackets，第一年度NCAA锦标赛向所有网民和设计社区开放。这个网站美丽简单，即使你不喜欢篮球也值得参观一下。

"我们使用了Simple Bracket，它让网站便于管理；招募Shopify 和 Squarespace改善各种奖项。"曼联工程师Nathan Peretic如是说。"整个网站非常有意思，我们计划每年都对其进行更新，让网站更大更好。"

08. Windows of New York

这个网站提醒我们：永远不要停止寻找。纽约窗户是一个每周插画精选网站，它是平面设计师José Guizar的私人项目，José Guizar解释说"做这个项目是为了促使我自己发展个人插画风格。"

09. Life in my Shoes

life in my shoes是一个强大的、主要以青少年为服务对象的平台活动，为人们缓解对HIV的恐惧和误解。它的总部位于伦敦，是一家数字代理公司，公司坚信，做网站能吸引青年观众。

装饰性的图片和抢眼的明黄色给人一种别致的美感。"about us"页面可根据平板电脑和智能手机的尺寸调整其自身大小。

10. Solo

Solo是一个一体化管理工具，主要针对于自由职业者。它花费少且易于使用，是集功能性、实用性、美观性于一体的软件。

这个网站展示产品页面全部都是由CSS3制作的，"一开始我决定用HTML5和CSS3，并且只提供现代浏览器版本，因为在前期调查中我们发现，只有百分之三的用户使用IE访问主页。因为我们的目标市场不在IE，所以没必要支持它。"APP设计者Jerome Iveson如是说。

11. Form Follows Function

网站的风格是极简，页面使用了金色和有趣的字体。Form Follows Function （FFF）是一个用HTML5和CSS设计网页极好的例子，设计者是一位来自韩国的工程师Jongmin Kim，他是一位交互工程师，现在在纽约的Firstborn Multimedia工作。Kim说这个网站的名字反应了自己的目标，即"追求负设计"将所有功能熟记于心。他还说自己是个偏执的极简主义者，所以网站设计的非常简单。

12. Branch

主页使用了CSS，做出了干净的网状结构Branch致力于为广大用户提供最新的交流方法，主页使用了CSS打造了极简且干净的多个选项。

13. The Gently Mad

大副标题和章节列表很好的传达了个人设计理念The Gently Mad是一个关于网页开发者的播客。创始人Adam Clark使用了CSS3转换工具和逐渐褪色功能，他告诉我们，"我觉得我的每一个设计单独看效果会更好。"

14. Amazee Labs

CSS精美样例使用现代Drupal框架，Amazee Labs可以为你的品牌制作新鲜的网站或社区，因为制作技术非常高超，他们的网站被视为CSS教学模版。他们已经为很多领域的公司制作过网站，都得到了非常好的反响。

15. A&W

"因为我们深爱着A&W，所以必须用一种方式留住美好的回忆，并与大家分享。"创意总监David Coomer阐述了网站制作的初衷。这个网站使用了CSS旋转转换，那你看得出在哪吗？

—————-完——————

翻译小组：优设网SDC翻茄匠 微博ID: @豆池麦
原文地址：creativebloq

本文由优设网原创翻译，转摘请注明优设网译文出处，谢谢各位小编。

 
================关于优设网================
"优设网uisdc.com"是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
PS礼仪手册：网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南http://hao.uisdc.com/ps/。
设计微博：拥有粉丝量62万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的"福利"吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：