28个优秀的CSS例子

这些天用CSS做什么真是太神奇了。所有主流浏览器的最新版本 - 甚至是Internet Explorer - 都支持最新的CSS3属性,以及排版,动画的可能性 +$and interactivity have never been greater. But finding web design inspiration can be tricky.

一个伟大的网站的秘诀不在于炫耀光滑的视觉效果和惊人的功能,而在于通过布局和导航为用户创造一个很棒的体验,引导他们快速,轻松地前往他们想要的地方。也就是说,如果它看起来也很漂亮,那就是锦上添花。

+$Here we list 28 great examples of CSS sites that will provide a burst of web design inspiration. CSS is also great for adding motion to your sites – take a look at our guide toCSS动画示例+$and how to recreate them for some pointers.

01. 输入条款

Type Terms was partly created as an excuse to experiment with CSS animation

类型术语部分创建为试验CSS动画的借口

Type Terms是由曼彻斯特的网页设计机构Supremo团队创建的动画备忘单。在做了一些研究之后,他们发现大多数关于印刷术语的现有在线信息都使用了简单的静态图像。该团队正在寻找试验SVG和CSS动画的理由,这是一个绝佳的机会。

设计师Dan Heywood说:“我决定创造一种更具视觉冲击力的东西,这将有助于新设计师在瞬间学习所有关键印刷术语。”

该团队强调设计师对排版有很好掌握的重要性。对于那些第一次学习规则的人,或者对于需要复习的经验丰富的设计师来说,这个备忘单既有教育意义又有探索的乐趣。内容集中,信息清晰,动画丝滑。看一下,用您的排版词汇给您的设计师朋友留下深刻印象。

02. MIT技术评论

Tech Review uses CSS to create a clean, Swiss feel

Tech Review使用CSS创造一种干净,瑞士的感觉

麻省理工学院技术评论是一份有着117年历史的出版物,以任何人都能理解的方式涵盖技术,今年夏天早些时候由波士顿设计工作室Upstatement重新启动。 “我们是Tech Review的超级粉丝,所以当Erik Pelletier(产品副总裁)找我们在网站上工作时,我们感到很兴奋,”Upstatement合伙人Mike Swartz说。

这些天看到一个出版物的网站没有如此大量地围绕图像设计是不寻常的,所以当你第一次导航到Tech Review的干净,看似瑞士风格的设计时,它会让人耳目一新。 “我们真的希望通过网站的设计系统捕捉Tech Review的精神和灵魂,并为他们的艺术总监创造一个创造性地使用的画布,”Swartz说。 “创意总监Tito Bottitta和设计负责人Nathan Hass设计了一个系统,旨在展示优秀的艺术作品,让读者感到高兴。”

该网站不是使用我们今天都知道的系统默认版本的Helvetica,而是Neue Haas Grotesk,它是Helvetica的原始版本,它真正推动了现代感。与米勒文本搭配身体副本,排版感觉经典而现代。图像的使用是深思熟虑的,刻意的,并允许排版闪耀。

03. BucketListly

Web design inspiration: BucketListly

Bucketlistly使旅行者和冒险者能够分享他们的故事,并鼓励其他人进行自己的冒险

BucketListly是一个社区,旨在帮助用户解锁现实生活中的成就,同时鼓励其他人也这样做。该平台使用Ruby on Rails与HTML5,SCSS,CoffeeScript和jQuery构建,能够让旅行者和冒险者与他们在网站上的朋友以及他们的社交网络分享他们的故事。

当用户在BucketListly上分享故事时,平台会自动跟踪他们完成生命目标的内容,时间和地点,让他们获得特殊徽章并在美丽的时间线和地图中显示所有数据。

04. 96头大象

Web design inspiration: 96 Elephants

96大象以非洲每天被杀的大象数量命名

总部位于美国的Viget Labs创建了一个以意识为中心的网络体验,以支持野生动物保护协会保护非洲大象的使命。最近的竞选活动是96只大象,因为这是非洲每天有多少大象被杀害。

教育叙述通过一系列单页章节讲述,每章都详细说明了正在进行的努力中发生的非常真实的并发症,以结束杀害象牙的非法行为。尽管主要目标是为请愿书推动注册,但Viget团队已经做了一项巧妙的工作,以平衡无所不在的号召性用语与更具情感引人注目的故事驱动内容所呈现的即时性。

正面和中心是令人难以忘怀的艺术方向,迫使你停下来并面对情感使命。美丽的,边缘到边缘的摄影和类似杂志的布局使得建立它的努力成为一种挑战。该网站不是从桌面开始,而是先基于移动设备构建。这样就可以有目的地将设计决策用于小屏幕,而不是充当桌面体验的淡化代理。

05. 合并记录

Web design inspiration: Merge Records

北卡罗来纳州达勒姆市的Merge唱片公司与当地的数字合作伙伴合作,将Arcade Fire,Superchunk和The Mountain Goats等乐队列入名单新奇建立世界一流的电子商务体验,以匹配其艺术家的质量。

基于NewfangledCMS,Newfangled专有的基于PHP的CMS,具有HTML5和CSS3,该网站可以很好地响应不同的设备大小。新系统现已自动化,以确保标签的资产全部集中管理和可用。新奇首席运营官克里斯巴特勒说,

“每当添加产品时,我们必须弄清楚这与一个位于不同数据库中的物理库存相对应,以及它如何解释位于另一个系统中的一个数字库存。我们必须弄清楚那些后勤。”由于每个页面上有许多不同的数据库调用,因此数据的优先级顺序非常重要。

06. 使者

CSS transitions are used to help aid in the Envoy demonstration

CSS过渡用于帮助参与特使演示

使者,一个专注于办公室访客注册的产品,提供优雅的iPad界面,用于收集名称,捕获签名和现场打印访客徽章。对于推广应用程序的网站,“主要目标是让我们的客户可以看到他们自己的访客如何在他们的办公室体验Envoy,”联合创始人兼设计师VítorLourenço解释道。 “我们认为,互动演示将是最具视觉冲击力的演示方式。”

为此,该站点在iPad模型上显示应用程序的功能和屏幕状态。当您滚动浏览单页网站时,状态会在演示中更新。 CSS过渡用于帮助演示,增强体验,而不会妨碍内容。

“我们花了很多时间研究微小的细节,”联合创始人兼工程师Larry Gadea补充道。 “当您滚动浏览NDA屏幕时,我们喜欢访客签名的方式,或者在流程结束时如何打印访客徽章。”

07. 多睡

多睡来自柏林的创意机构拥有一个大胆的网站。 “我们的目标是展示代表我们专业知识的三个项目,而不是展示我们迄今为止所做的所有工作,”技术总监Torsten Bergler说。

大字体大小的值,整洁的滚动效果和红色,对比鲜明的配色方案使这个网站脱颖而出。 “作品的独特之处在于:将项目过程可视化,引导访问者通过它并讲述我们所做工作的故事,”艺术指导主管Stefan Schuster说。

CSS过渡使得浏览页面和内容更加顺畅。背景大小属性用于控制不同大小的图像缩放。甚至简报注册表格的风格也与干净的外观和感觉相匹配。

08. 感谢登记处

感谢登记处使夫妻可以从互联网上任何地方的任何礼物创建一个独特,个性化的婚礼登记。该网站由创建粉碎+可爱;来自其前端团队的Jeff Schram和Michael Phillips希望CSS能够像设计一样美观。他们花时间仔细规划了这个应用程序的SCSS结构。

菲利普斯解释说:“在多开发人员的环境中,代码的组织,易于遍历和全面评论至关重要。”这项艰苦的工作体现在网站的审美中,具有强烈的排版和强大的图像。团队不希望在任何视口中隐藏这些视图,并且有可能失去其重要性。

“我们创建了一个响应式系统,可以向下滑动整个页面以显示主要的导航选项。这使我们能够专注于华丽的图像,并为用户提供独特的响应体验,”Schram说。

09. 生活在我的鞋子里

Life In My Shoes是一个强大的多平台活动,旨在
年轻人挑战围绕艾滋病毒的恐惧和误解。位于伦敦的数字代理商交通听取了关于开发一个吸引年轻观众的网站的简报。

品牌字体Houshka Rounded Medium使用font-face实现,为网站带来全新的外观和感觉。装饰性图案和戏剧性的黄色装饰为您提供诱人的美感。

“关于我们”页面具有生动的视差效果,可针对平板电脑和智能手机进行调整。 “我们为这些设备编写了媒体查询,将背景附件从固定更改为滚动,并设置各个背景位置,使图像位于正确的位置,”交通团队解释道。

10. 独奏

Solo是一款面向自由职业者的一体化项目管理工具。该应用程序具有成本效益和易用性,结合了强大的功能,可用性和精美的设计。

宣传该产品的网站充满了CSS3的精彩。 “我决定使用偏移量中的HTML5和CSS3,仅适用于现代网络浏览器,”解释说杰罗姆艾弗森,应用程序的设计者。 “我们网站的访问者中只有3%使用Internet Explorer。由于我们的目标市场似乎没有使用它,所以Solo似乎没有理由支持它。”

在整个设计过程中,您将看到这些CSS规则的实际应用,这使得项目管理在过多的彩色CSS框阴影中更具趣味性。像Clarendon和Bryant这样的字体提供了精致和有趣的平衡。

调整网站大小或在移动电话上查看它可让您看到适应不同屏幕尺寸和分辨率的布局。 “我非常喜欢陷入媒体问题的一面。从设计的角度来看,我觉得非常有趣,”Iveson说。

11. 形式遵循功能

examples of css

风格很小,使用黄金比例和有趣的排版

形式遵循功能(FFF)是韩国开发人员精心设计的HTML5和CSS实验展示Jongmin Kim谁是互动开发人员初生多媒体在纽约。

Kim解释说,他的网站名称反映了他总是追求“减去设计而非设计”的目标,并牢记形式遵循功能。他说他的风格很小,并使用了黄金比例以及有趣的排版。 FFF被认为是“为了好玩”,并让Kim花了三个星期来创作,包括度过他的假期。

12. 轻轻地疯了

Web design inspiration: The Gently Mad

大标题和精心设计的剧集列表传达了这种设计的个人风格

轻轻地疯了是一个关于网络创作者的与主题无关的播客。亚当克拉克它背后的思想,在设计它时创造了一些具有更大影响力的东西,从传统的博客布局中脱离出来。

大标题和精心设计的剧集列表传达了这种设计的个人风格。他告诉我们,克拉克从'更疯狂'的CSS3过渡开始,然后消除它们。 “我觉得我所做的设计选择(颜色,布局,排版)只是单独留下来好得多,”他说。

13. Amazee Labs

examples of css

凭借能力和自信,这个网站是CSS的一个很好的例子

创建新的网站和社区解决方案,Amazee Labs基于现代开源框架Drupal将您的品牌带入在线世界。凭借能力和自信,他们自己的网站是CSS的一个很好的例子。

已经为电视网络,数字代理商,慈善机构和企业创建网站,很明显他们的网站给每个人留下了深刻的印象。我们完全同意。

14. A&W

CSS rotation transforms are used on header text, giving the A&W site a fun print-menu feel

CSS旋转变换用于标题文本,为A&W网站提供了有趣的打印菜单感觉

小组在Cornett IMS想要一个网站A&W这不仅仅是一个标志,汉堡和根啤酒。

“我们对A&W的热爱不得不对我们家乡的餐厅共享的记忆做了很多,所以我们想要超越每家商店的独特性,将新一代的粉丝与他们当地的A&W联系起来,”首席创意官David Coomer解释道。网站的目的。

使用@ font-face来提供Metroscript和Century Gothic字体可以创建一个定制的,令人愉快的类型系统。 CSS旋转变换用于标题文本,为网站提供了有趣的打印菜单感觉。

25. Nolowene Nowak

examples of css

Nolowene Nowak通过这个有趣的在线作品集展示了她的技能

网页设计师和插画家Nolowene Nowak创造了一个有趣的在线作品集 - 一个很好的例子,用于产生辉煌的效果。如果向下滚动并查看时间轴部分,您会注意到CSS驱动的布局智能地指定了创建模块的基本规则,该模块在较小的屏幕上从水平布局更改为垂直布局。

该网站使用起来和创建一样愉快:“这是一次非常丰富的体验,让我能够创造出独一无二的东西,只是我,”开发人员说。Christophe Dumont。 “我们希望为游客提供与他小时候发现新玩具时相同的体验。”

在开发过程中,杜蒙使用了Zurb的基础:使用Sass构建的响应式CSS框架。 “它的支持确实使响应式设计变得生动,”他说。

16. 卡瓦设计

The website draws users in with hints of scrolling animation and parallax functions

该网站通过滚动动画和视差功能提示用户

设计工作室Caava有一个美丽的新网站。用户通过滚动动画和视差函数的提示进行绘制,而主要焦点仍然在投资组合上。 “我们试图提供一种新鲜而独特的线性体验,而不是用它来击败人们,”Caava老板Cody Small解释道。

滚动浏览网站,将不同部分联系在一起的箭头为顶部和左侧位置设置动画,保持体验的凝聚力。开发商Brandon Lavigne表示:“由于我们有很多动画效果,所以需要一些时间让它感觉自然而且对设计有所支持。”

箭头在整个设计中是一致的,例如在探索工作区域时。仔细观察,你会发现它们是用CSS边框和变换创建的。这是非常整洁和有用的,因为项目有不同的配色方案,然后可以使用CSS属性轻松更改箭头颜色以匹配。

17. Fitbit

Web design inspiration: Fitbit

Fitbit的网站设计明亮活泼,具有图标和丰富多彩的统计图形

Fitbit使活动跟踪器和秤记录活动,监控睡眠,并记录您的体重和脂肪。此信息通过无线方式发布到Fitbit,用户可以在其中查看图表,设定目标,与其他人竞争和分享他们的进度。 “我们的使命就是利用技术让世界变得更健康!”评论开发商Biagio Azzarelli。

网站设计明亮活泼。图标和丰富多彩的统计图形有助于将信息片段带入生活,而不会让用户厌烦。使用良好的网格应该可以很容易地将网站转换为流畅的布局。

Azzarelli说他喜欢基于用户分析开发网站。 “随着我们的用户群继续采用A级浏览器,我们能够充分利用CSS3中令人愉悦的部分,并在IE7和8中具有可接受的降级。”

18. Mammothbooth

examples of css

MammothReach背后的团队创造了这个很酷的photobooth MammothBooth

底特律的艺术家MammothReach想要创造出世界上所见过的最辉煌的光影画面MammothBooth网站诞生了。

“我们想要一个流畅,即时,有趣的网站,”设计师/开发人员Nick Keebaugh回忆道,“这正是我们展位的方式。总而言之,我们希望在整个网站上有一种完全自定义的感觉,反映出我们是谁一个公司以及我们的产品的核心。该网站是MammothBooth的在线延伸。“

MammothReach利用旋转变换属性和一个恒定旋转的大螺旋突发图像。当您使用动画样式属性访问网站的不同部分时,有趣的内容会滑入。俏皮的Arvil Sans字体非常适合美学,可以作为“名字价格”字体丢失型合作社

19. Lab Partners

Examples of CSS

Lab Partners通过色彩缤纷的装饰网站展示他们的作品

由丈夫和妻子团队Ryan Meis和Sarah Labieniec经营的艺术和设计工作室Lab Partners推出了一个色彩缤纷的装饰网站,这是CSS最好的例子之一。

每个页面都注重细节。工作部分采用策划布局,使组合感觉特别原始。项目缩略图具有大的悬停区域,通过清楚地区分悬停状态来利用不透明度属性。商店部分在Big Cartel购物车上运行,但感觉就像网站的集成部分,应用于元素的自定义CSS。

“网络真正感觉就像是形式和功能的最终组合之一,”Meis观察道。他接着解释说,在两者之间找到平衡既愉快又充满挑战。 “最终,每个问题都成为了一个创造我原本没想过的解决方案的机会。”

20. 披萨脑

Examples of CSS: Pizza Brain

Pizza Brain完全响应,在较小的布局上看起来很棒

CSS的例子并没有比这更好! Pizza Brain由Brian Dwyer创立,是世界上第一家比萨博物馆和餐厅。该网站推广新闻稿和博客,描述了Michael Almquist设计的品牌推广进展和特色。

字体Pacifico Regular和Bebas Neue搭配温暖,比萨饼般的色调,营造出友好的美感,易于阅读,同时仍然令人兴奋和有趣。开发商Arjun Mehta说:“那个橙色,它很漂亮,它确实为内容奠定了基础。”

各种圆角和不透明效果使这款简洁的外观更加完美。 “将每个帖子放在自己的圆角矩形内容部分实际上是借用了Pizza Brain的名片上的视觉语言,”Mehta补充道。完全响应,该网站在较小的布局上看起来很棒。

CSS的最佳实例之一 - 并且随着更多预期的到来,请密切关注网站。 Mehta说:“我对这个网站的发展方式感到兴奋,并且随着时间的推移,这个令人惊叹的事业得到了进一步的完善和建设。”

21. 可发布

Examples of CSS: Postable

Postable提供了一种捕获邮件地址的简便方法

主要针对希望发送婚礼请柬和节日贺卡的访客,或者仅仅想要在线地址簿的访客,Postable提供了一种捕获邮寄地址的简便方法。

“Postable具有令人难以置信的俏皮外观,特别是对于Web应用程序,我希望能够忠于这些设计,”前端开发人员Kevin Kneife说。从信封风格的条纹边框到有趣的背景纹理,再到坚固圆润的Omnes Pro字体,该网站立即使收集地址的效果更小。

整个过程都使用有趣和有用的插图。圆角,缎带和巧妙的悬停状态使网站的参与变得有趣。这是我们见过的CSS变换的最佳示例之一,它们用于更新背景图像的旋转值,将用户吸引到有关网站使用容易程度的说明中。

创建帐户后,添加联系人是通过简单易用的表单完成的,该表单具有Kneife完全制作的纯CSS选择框。他透露,“这涉及使用外部div屏蔽表单上的选择框,增加透明度,并使用-webkit-appearance。结果是一个在所有浏览器上看起来都很好并且优雅地降级的盒子。”

22. 罗比莱昂纳迪

Examples of CSS: Robby Leonardi

该网站提供丰富多彩的插图和卡通风格

设计师Robby Leonardi的家拥有丰富多彩的插图和卡通风格,为工作带来欢快的个性。正如Leonardi所说,“让人们微笑总是一件好事,我认为这个网站会做到这一点。”

这是用于创建令人惊叹的视觉效果的CSS的一个很好的例子。背景图像被分层以在标题区域中创建整齐的水平视差效果。在页面下方,CSS旋转变换用于移动查看区域侧面的齿轮。投资组合作品在木制窗户内框架,有动画盘旋。

木块由Leonardi渲染的3D模型制成。他解释说,“我将所有这些渲染组合成一个图像,并在用户滚动页面时更改CSS left属性。非常令人惊讶的是,一个简单的CSS技巧可以产生如此好的效果!”

23. Libor Zezulka

Examples of CSS: Libor Zezulka

Libor Zezulka是一个干净而聪明的个人投资组合

Libor Zezulka的这个单页网站是一个干净,聪明的个人作品集,设置在流行和文本之间,由于CSS文本阴影的智能使用,需要阅读。

首席设计师和前端开发人员Martin PospisilMadeo喜欢在网站上工作。 “[我们]拥有使用设计和技术的自由,”他解释道。这显示了该网站的有趣因素。该设计简单而有效,因为这些部分清晰可辨。 Pospisil认为“权力在于图标和颜色组合。”

另一个独特的触感是灯箱弹出窗口。此站点上的按钮可通过下方的阴影成像进行操作。关闭按钮与盒子稍微偏移,提供易于使用的界面。

34. Emporium Pies

The Emporium PIes website will make you want to try all of them

Emporium PIes网站将让您想要尝试所有这些

“该Emporium Pies网站有一份工作:让你想吃更多馅饼,“Kyle Turman,互动导演铸造集体断言。而男孩,他是在说实话。设计精良的达拉斯馅饼和咖啡店的响应网站将让您感到饥饿。饿扁了。

“运营总监保罗·威尔克斯拍摄了一些非常出色的馅饼照片,我们尽可能地将它们放在设计的层次结构中,”Turman继续说道。 “我们认为让馅饼说话是很重要的,而不是用大量的漫无边际的副本填满网站。”

查看Pies页面上的悬停效果。它使用CSS 3D变换与馅饼图像上的背面可见性属性相结合,以显示名称和有关甜点的更多信息。

25. 汽车共享的未来

Examples of CSS: Future of car sharing

这个迷人的水平滚动网站让用户体验变得轻松

汽车共享的未来,之间的合作协作基金Hyperakt在支持下Startup America Partnership,充满了越来越受欢迎的汽车所有权替代品的信息。通过这个迷人的水平滚动网站,轻松解读点对点,企业对消费者和非营利性汽车共享的差异。

“从一开始就决定尽可能地推动这件作品,”Hyperakt的信息架构师Simon Corry建议道。 “这意味着,虽然我们在可能的情况下为旧版浏览器提供向后兼容性,但重点是测试CSS3属性的限制。我一直是视频游戏的粉丝,并且目前对CSS3的浏览器支持水平我是能够通过CSS享受这种级别的动画和工程。

“CSS3的优点在于其简洁性,使其成为任何创意的完美语言,”Corry说。

26. 生活在格林维尔

Examples of CSS: Greenville

该网站以Kulturista字体迎接您

格林维尔的生活看看南卡罗来纳州格林维尔的生活和工作。 “我们所有人都在CoWork爱格林维尔,并希望创建一个网站,帮助人们理解为什么,“首席开发人员肖恩加夫尼说。

该网站以全画幅,响应迅速的英雄形象,以令人瞩目的53px字体大小迎接Kulturista字体。干净的设计让您保持参与,并希望通过易于访问的内容了解更多信息。悬停上略带动画的徽标也提供了一些乐趣。

该团队利用Skeleton样板来帮助构建样式。 “Skeleton为设计提供了一个非常好的基本宽度设置,所以它只是为了调整每个屏幕尺寸的布局中的一些项目,”Gaffney说。

27. 真鱼传说

Examples of CSS

True Fish Tales是使用CSS3和JavaScript的组合构建的

真鱼传说真的让你感到高兴。它讲的是渔民以讲述高大故事而闻名的想法,将潜伏在海底的怪物的一些惊人的“真实故事”汇集在一起。它与众不同的是它流畅且用户友好的交互性,这使得发现内容成为一种有趣和有趣的体验。

信息图由...组成布赖恩迈尔马克谢尔顿肯塔基州代理商DBS>互动作为不断增加新内容的努力的一部分联合航海网站。

Maier和Shelton使用CSS3和JavaScript的组合来构建信息图。 “许多动画和图形都是用CSS3处理的,”刘易斯解释说,“但他们在某些地方使用JavaScript来适应那些尚未支持这种技术的旧浏览器。

28. 四站

Examples of CSS

今年,四号车站经过重新设计,以改善其品牌

网络代理四站经历了品牌重塑过程,并设计了一个新的网站,以改善其个性和品牌。 “我们开始构思新网站的想法是展示,而不是告诉潜在客户我们能做些什么,”Station Four创意总监和共同所有人Christopher Olberding解释道。

因此,新主页使用大型特色工作横幅来展示Station Four的最新作品。

“专业知识”页面有一个有趣的导航设计:它使用大圆形图像作为链接。这些利用border-radius属性来实现外观,并对它们应用动画。

我们错过了你最喜欢的CSS实例吗?请在下面的评论中告诉我们!

贡献者克里斯卡什多拉尔Rich Clark

这些评论最初发表于网络杂志,这是全球最畅销的网页设计师和开发者杂志。

话题



翻译字数超限