令人难以置信的纯 CSS3 图标

古欣 发布于 2010/09/13 22:58
阅读 1K+
收藏 4

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

奥林匹克标志

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

Olympics Logo

jQuery 标志

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

jQuery Logo

jQuery UI 标志

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

jQuery UI Logo

CCS 标志一宗

作者: Justin Sepulveda
全部基于纯 CSS3 的 border-radius, gradient, transform 属性。

CSS Logos NBC CBS FORRST DRIBBBLE UNIVISION BMW

Opera 标志

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

Opera css logo

iOS icons

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

iOS icons

简单 css 图标

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

Simple css icons

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

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

Pure CSS animated 3D Super Mario Icon

纯 CSS 图标一宗

作者: Andrew Kelly
使用了 CSS3 的渐变,阴影,圆角等属性,效果很出众。

Some nice icon made with pure CSS

CSS3 实现的 Photoshop 标志

作者: Radu Chelariu
完全基于 CSS3,没借助任何图形。

Adobe Photoshop Logos in CSS3

加载中
0
puras
puras

其实,我想说,这个文章很老了。

 不过还是支持一下

0
leetom
leetom

但是这里为什么都成图片了

0
wx---羊毛联盟
wx---羊毛联盟

有的浏览器是看不到效果的.. ......

0
曾建凯
曾建凯

很正常,css2已经可以做这些了,不过有个老外说的对,就是你如果让设计去理解你的CSS代码,是一件很费神的事情。设计才是核心,如果已经有现成的摆在那里了,做成CSS的当然也很容易。

0
囧南风囧
囧南风囧

有一篇文章批评说,这样是浪费带宽!

0
曾建凯
曾建凯

其实各有各的好处,看需要和场景吧。

返回顶部
顶部