正在阅读:你没有眼花!令人难以置信的纯CSS3图标你没有眼花!令人难以置信的纯CSS3图标

2010-08-25 10:23 出处:PConline 作者:its 责任编辑:chendang1

  尽管被批评为走火入魔,CSS3 痴迷者们仍然在尝试实现各种基于纯 CSS 的图形与图标设计,如果你看到本文介绍的这些精美图标,你绝对不会相信它们完全是由 CSS3 代码生成的。尤其是那套由 Louis Harboe 设计的 iOS 图标,那么微妙的色彩与纹理,真的难以置信。

  奥林匹克标志

  作者: Doug Neiner

  基于纯 CSS,以 em 为单位,可动态调整尺寸,需要浏览器支持 border-radius 属性,目前支持的浏览器包括 Chrome, Safari, Firefox 和 IE9。

01
奥林匹克标志

  jQuery 标志

  作者: Doug Neiner

  这是大家最钟爱的 JavaScript 框架 jQuery 的标志,使用 CSS3 的 border-radius 属性。

02
jQuery 标志

  jQuery UI 标志

  作者: Doug Neiner

  这是 jQuery UI 库的标志,同样,基于 CSS3 的 border-radius 属性。

03
jQuery UI 标志

  CCS 标志一宗

  作者: Justin Sepulveda

  全部基于纯 CSS3 的 border-radius, gradient, transform 属性。

04
CCS 标志一宗

  Opera 标志

  作者: David DeSandro

  做得非常漂亮,大量使用了 border-radius, gradient 属性,不过在不同浏览器显示不太一致,尤其在 IE 中。

05
Opera 标志

  iOS icons

  作者: Louis Harboe

  非常伟大的作品,使用了 CSS3 的高级功能。

06
iOS icons

  简单 css 图标

  作者: Zander Martineau

  这份作品可以教你如何使用 CSS 实现三角形,如何实现诸如 RSS 图标,心形图,三角形一类的简单图形。

07
简单 css 图标

  基于纯 CSS 的超级玛丽 3D 动画图标

  作者: Andreas Jacob

  基于 CSS3 和 CSS 4D 框架 ,动画部分很精彩,但目前只支持 Safari 5。

08
基于纯 CSS 的超级玛丽 3D 动画图标

键盘也能翻页,试试“← →”键

关注我们

最新资讯离线随时看 聊天吐槽赢奖品