用纯CSS3绘制的网站图标

在Google Reader上看到网友分享的一个链接，真的发现自己已经out了。上面的这张图，是纯CSS实现的，没有背景图、没有Javascript代码，更让我惊讶的是，它的html代码居然是如此的漂亮，没有一丝丝的代码冗余：

• Facebook

• Twitter

• RSS

• Flickr

• Delicious

• LinkedIn

• Google

• Orkut

• Technorati

• NetVibes

作者的原文在这里，作者的Demo在这里，完整的CSS文件在这里，为了能看到如图所示的效果，请使用Firefox或Google Chrome等支持css3的浏览器。

让我们来重现一下他的制作过程：

基本框架的实现。

每个图标大小width:64px;height:64px;间距20px;将a标签设置为display:block;在加上css3的圆角、文字阴影属性，详细css如下：

.cssicon {width:500px;overflow:hidden;margin:0 auto;margin-top:100px;}.cssicon ul{list-style:none;padding:0;margin:0;font:0.875em/1 Arial, sans-serif;}.cssicon li{float:left;overflow:hidden;margin:20px 20px 0 0;}.cssicon ul li a {display:block;width:64px;height:64px;overflow:hidden;border:1px solid silver;line-height:64px;text-decoration:none;/* css3 */text-shadow:0 -1px 0 rgba(0,0,0,0.5);-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}

此时的效果在这里。

巧用文字效果

我们看facebook图标的实现。代码如下：

.cssicon ul li a {display:block;width:64px;height:64px;overflow:hidden;border:1px solid transparent;line-height:64px;text-decoration:none;/*将上面li a定义中的border属性修改为border:1px solid transparent*/.cssicon ul li a:hover,.cssicon ul li a:focus,.cssicon ul li a:active { opacity:0.8;border-color:#000;}/*增加hover效果*/.facebook a {border-color:#3c5a98;text-transform:lowercase;text-indent:34px;letter-spacing:10px; font-weight:bold; font-size:64px;line-height:66px;color:#fff;background:#3c5a98; /* css3 */ -moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4);box-shadow:0 0 4px rgba(0,0,0,0.4);}

首先用font-size调整到一个合适的字体大小，然后巧妙地应用text-indent属性，将首字母f摆到了合适的位置，最后用letter-spacing属性拉开了第二个字母与首字母之间的距离，由于父级设置了overflow:hidden属性，超出的字母就消失了。后面的twitter、google、LinkedIn都是同样的手法，只是增加了css3中关于背景颜色的线性渐变属性linear-gradient。
此时的效果在这里。

巧妙应用:after和:before伪类补充图标内容

比如Flickr的图标，两个圆圈就是使用:before和:after伪类加进去的。代码如下：

.cssicon .flickr a {position:relative;border-color:#d2d2d2;text-indent:-9000px;font-size:108px;font-weight:bold; color:#fff;background:#fff;/* css3 *//* NOTE: box-shadow is not currently in any CSS3 module. It may be reappear in a different form altogether */-moz-box-shadow:0 0 4px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 4px rgba(0,0,0,0.4); box-shadow:0 0 4px rgba(0,0,0,0.4); /* standards version last *//* NOTE: webkit gradient implementation is not as per spec */background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d2d2d2));background:-moz-linear-gradient(top, #fff, #d2d2d2);background:linear-gradient(top, #fff, #d2d2d2); /* standards version last */}/* create blue circle */.cssicon .flickr a:before {content:"\00a0";position:absolute;top:50％;left:30％; width:20px; height:20px;margin:-10px 0 0 -10px;background:#085ec5;border:1px solid #003c84;/* css3 */-moz-border-radius: 20px;-webkit-border-radius: 20px;border-radius: 20px; /* standards version last *//* NOTE: webkit gradient implementation is not as per spec */background:-webkit-gradient(linear, left top, left bottom, from(#005cc6), to(#003d83));background:-moz-linear-gradient(top, #005cc6, #003d83);background:linear-gradient(top, #005cc6, #003d83); /* standards version last */}/* create pink circle */.cssicon .flickr a:after { content:"\00a0";position:absolute;top:50％;right:30％;width:20px;height:20px; margin:-10px -10px 0 0;border:1px solid #ba0060;background:#fd1e93;/* css3 */-moz-border-radius:20px;-webkit-border-radius:20px;border-radius:20px; /* standards version last *//* NOTE: webkit gradient implementation is not as per spec */background:-webkit-gradient(linear, left top, left bottom, from(#fd1e93), to(#cb026c));background:-moz-linear-gradient(top, #fd1e93, #cb026c);background:linear-gradient(top, #fd1e93, #cb026c); /* standards version last */}

首先，为了配合:before和:after增加的内容的定位，a标签增加了position:relative属性，a:after和a:before都增加了position:absolute属性。因为是纯图像型的，此时的文字已经没有用处了，所以直接使用text-indent:-9000px将文本内容扔到了九霄云外。最后:before和:after中的content属性的值”0a0″其实就是个空格，没啥意义的。使用width:20px;height:20px;再配合border-radius：20px就画出了一个小圆，加上背景颜色的线性过渡，两个小圆就出来了。此时的效果在这里。