大伟的博客

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

<ul>
   <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li>
   <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li>
   <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li>
   <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li>
   <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li>
   <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li>
   <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li>
   <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li>
   <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li>
   <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li>
</ul>

作者的原文在这里，作者的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属性的值”\00a0″其实就是个空格，没啥意义的。使用width:20px;height:20px;再配合border-radius：20px就画出了一个小圆，加上背景颜色的线性过渡，两个小圆就出来了。此时的效果在这里。

=============感叹的分割线=======
太久没写过代码了，快不会了……

This entry was posted on 星期三, 三月 24th, 2010 at 11:49 下午 and is filed under Web技术. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.