网页设计的三秒规则！ 留下良好的第一印象”
“让阅读更时尚！” 25 个出版物式网页设计示例
“应该做什么？” 网页设计师永远不会落后”
01.特使
本网页使用的是Envoy的CSS转换功能，Envoy是一款办公室访客登记软件，界面类似于iPad。 可以填写的信息包括姓名、签名、留下的痕迹等。 除了网页版外，它还提供移动或平板电脑应用程序。
这个软件最初的目的是告诉主人客人在他们的办公室做了什么，进行了哪些操作。 为了实现这一目标，该网站使用应用程序的功能，屏幕模仿 ipad 的屏幕css3优秀网页，当您滑动页面时，它会手动更新，其中 CSS 过渡发挥作用。
“我们花了很长时间研究细节，对设计非常满意！” 该网站的联合创始人说。
02.O音乐奖
Happy Cog 使用了 CSS 的许多功能来制作前面的页面。 MTV为第四届在线音乐节搭建了一个新网站，由Happy Cog创建，它使用了很多不同的CSS功能，并将它们组合在一起来实现这种效果。
“我们的设计是动态且独特的。在使用 CSS 时，我们敢于创新，采取独特的方法，并使用了许多通常不允许的想法。” 工程师斯蒂芬·卡弗说。
在此站点上，您可以看到 CSS 增强功能，例如渐变、过渡和透明度。 比如它的方头周围设置了一个框架，后面巧妙地搭配了一条弧线，非常具有现代感。 同时，这是一个响应式网站，即使个别页面的布局非常复杂。 “确实，制作过程中有些视口放置问题比较棘手，但能够KO那些原本未知的问题也很好~”Caver 说道。
03. 方空间
在 SquareSpace 中，CSS 变换和动画功能用于增强设计和交互。 Squarespace 是一个功能强大的一站式网站，具有大量自定义选项，允许用户创建自己独特的模板以及有趣的导航。
“Squarespace 的设计团队在设计当前导航之前尝试了其他样式。我们最终放弃了上述设计，因为当前版本允许我们将多个链接放在一起，而不是将它们分散在整个页面上。”前端的 Kenneth Cachia 说道。最终工程师。
CSS 变换和动画用于增强设计和交互。 使用漂亮的 Hoefler & Frere-Jones 字体来吸引人们的注意力。 卡奇亚表示，该网站“拥有干净的页面、字体、图标以及引人注目的图像等细节之美。”
04.Rent.com
Rent.com 是一家美国公寓租赁网站，它使用单独的 CSS 文件，可供 IOS、BlackBerry 和 Android 下载。
在听了 Scott Jehl 谈论 RWD（Filament Group）后，该公司决定重新设计网站。 更新后的版本是一个特别有用且响应迅速的网站。
“从设计的角度来看，我们把重点放在图片和中心文字上。底层有清晰的房间缩略图，点击后会显示更多图片。” 托德·帕克说道。
这个网站的设计干净、甜美，就像新鲜采摘的蔬菜一样，并且很好地利用了红色空间。 合理的设计可以将用户的目光集中到你想要表达的内容上，这对于租房网站来说非常重要。 在该网站中，您会发现精彩的 CSS 渐变、透明度和动画设置。
05.更多睡眠
MoreSleep是一家总部位于柏林的创意机构，它有一个像血管一样的网站。
“我们的目标是在网站上有选择地展示代表我们专业知识的三个项目，”技术总监 Torsten Bergler 说道。 大字体、简洁的滚动效果和明亮的黄色对比使该网站脱颖而出。
“这件作品所表达的意义是独一无二的，想象这些复杂的血管引导用户一步步走过我们的故事，真是令人惊叹。” 过渡工具让页面和内容之间的过渡更加流畅滑动，背景大小调整功能用于控制不同规格下图像缩放的效果。
06.感恩登记处
感谢登记处是一个针对新婚夫妇的网站，情侣们可以在其中编写独特且个性化的婚礼登记处，可以是他们想要的任何内容。 该网站由 Crush + Lovely 制作。 Jeff Schram 和 Michael Phillips 是该网站的后端工程师。 他们希望CSS能够像ps设计一样漂亮，所以他们花了很多时间仔细规划SCSS结构。
“我们制作了一个响应式系统，您可以向下滑动整个页面以显示主要导航选项。这种设计使我们能够专注于美丽的图像，同时也为用户提供了独特的响应式体验。” 施拉姆如是说。
07.括号
United Pixelworkers 和 Dribbble 联手制作了 The Brackets，这是首届向所有网络冲浪者和设计界开放的年度 NCAA 锦标赛。 这个网站既美观又简单，即使您不喜欢足球css3优秀网页，也值得一看。
“我们使用了 Simple Bracket，这使得网站易于管理；聘请了 Shopify 和 Squarespace 来改进各种奖项。” 曼联工程师内森·佩里蒂奇说道。 “整个网站非常有趣，我们计划每年更新它，使其更大、更好。”
08. 纽约之窗
这个网站提醒我们：永远不要停止寻找。 New York Balcony 是一个每周一次的插画策展网站，是平面设计师 José Guizar 的个人项目，他解释说：“我做这个项目是为了推广我自己的个人插画风格。”
09. 生活在我的鞋子里
《life in my Shoes》是一个主要服务于中学生的强大平台活动，帮助人们减少对艾滋病的焦虑和误解。 这是一家总部位于多伦多的数字机构，致力于创建一个吸引年轻受众的网站。
装饰图片和鲜红色赋予它独特的美感。 “关于我们”页面会自行调整大小以适应平板电脑和智能手机的规格。
10. 独奏
Solo 是一款主要针对自由职业者的一体化管理工具。 它消耗较少且易于使用。 是一款集功能性、实用性、美观性为一体的软件。
该网站上展示的所有产品页面均由 CSS3 制作，“我一开始就决定使用 HTML5 和 CSS3，并且只提供现代浏览器版本，因为在初步调查中，我们发现只有 3% 的用户使用 IE 访问首页。因为我们的目标市场不是IE，所以不需要支持。” APP设计师Jerome Iveson说道。
11.形式服从功能
该网站的风格是简约的，使用黑色和有趣的字体。 形式跟随功能 (FFF) 是一个使用 HTML5 和 CSS 进行网页设计的优秀示例，作者是来自日本的 Jongmin Kim，他是一名交互工程师，现在在多伦多 Firstborn Multimedia 工作。 金说，该网站的名称反映了他“追求消极设计”并牢记所有功能的目标。 他还表示，自己是一个偏执的极简主义者，所以网站的设计非常简单。
12. 分行
主页使用 CSS 创建干净的网格结构。 Branch致力于为用户提供最新的通讯方式。 主页使用 CSS 构建多个简约且干净的选项。
13. 温柔的疯狂
大副标题和章节列表很好地传达了个人的设计理念。 The Gently Mad 是一个关于网络开发人员的播客。 创始人 Adam Clark 使用 CSS3 过渡工具和淡入淡出功能，告诉我们，“我认为我的每个设计单独使用效果更好。”
14. Amazee 实验室
CSS 精美示例 使用现代 Drupal 框架，Amazee Labs 可以为您的品牌创建一个新的网站或社区。 由于制作技术如此精湛，他们的网站被视为CSS教学模板。 他们已经为很多领域的公司制作了网站，并得到了很好的反响。
15. A&W
“因为我们如此热爱A&W，所以我们必须用一种形式来保存美好的回忆并与大家分享。” 创意经理David Coomer讲述了制作该网站的初衷。 这个网站使用了CSS旋转变换，你能看到它在哪里吗？
- - - 超过 - - -
翻译团队：优舍网SDC茄子翻译微博ID：@豆Chi马
