用CSS3绘制的网站的图标。这个算是比较初级的，一些圆角，阴影，渐变。不过正是因为不算很复杂，所以对于刚研究CSS3的童鞋来说还是很有帮助的，很多复杂的CSS3效果也是从简单的开始的。

今天在网上搜寻各个网站的图标，于是就发现了这个，用CSS3绘制的网站的图标。这个算是比较初级的，一些圆角，阴影，渐变。不过正是因为不算很复杂，所以对于刚研究CSS3的童鞋来说还是很有帮助的，很多复杂的CSS3效果也是从简单的开始的。

于是我就记录了下来，大家一些学习下，有时间我写几个国内的SNS网站的图标出来玩玩，算是学习的收获。

Html代码比较简洁，当然，精华都在CSS里面。

原文地址：Pure CSS social media icons 完整的CSS：这里 演示地址：

VIEW DEMO

li >

CSS，首先是整体CSS的定义

list-style:none; padding:0; margin:0; overflow:hidden; font:0.875em/1 Arial, sans-serif;ul li { float:left; width:66px; height:66px; margin:20px 20px 0 0;ul li a { display:block; width:64px; height:64px; overflow:hidden; border:1px solid transparent; 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; /* standards version last */ul li a:hover, ul li a:focus, ul li a:active { opacity:0.8; border-color:#000;

举例RSS图标的实现

.rss a { position:relative; width:60px; padding:0 2px; border-color:#ea6635; text-transform:lowercase; text-indent:-186px; font-size:64px; font-weight:bold; color:#fff; background:#e36443; /* 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); background:-webkit-gradient(linear, left top, left bottom, from(#f19242), to(#e36443)); background:-moz-linear-gradient(top, #f19242, #e36443); background:linear-gradient(top, #f19242, #e36443);/* create circle */.rss a:before { content: 0a0 position:absolute; bottom:10px; left:10px; width:12px; height:12px; background:#fff; /* css3 */ -moz-border-radius:12px; -webkit-border-radius:12px; border-radius:12px;/* create the two arcs */.rss a:after { content: 0a0 position:absolute; bottom:10px; left:10px; width:22px; height:22px; border-style:double; border-width:24px 24px 0 0; border-color:#fff; /* css3 */ -moz-border-radius:0 50px 0 0; -webkit-border-radius:0 50px 0 0; border-radius:0 50px 0 0;

其实这个并不是很复杂，画的这些图标用的基本都是类似的CSS，提供的只是一种思路，看自己从简单的东西发掘出什么。