今天在网上搜寻各个网站的图标，于是就发现了这个，用CSS3绘制的网站的图标。这个算是比较初级的，一些圆角，阴影，渐变。不过正是因为不算很复杂，所以对于刚研究CSS3的童鞋来说还是很有帮助的，很多复杂的CSS3效果也是从简单的开始的。
于是我就记录了下来，大家一些学习下，有时间我写几个国内的SNS网站的图标出来玩玩，算是学习的收获。
Html代码比较简洁，当然，精华都在CSS里面。
原文地址：Pure CSS social media icons 完整的CSS：这里 演示地址：
<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>
CSS，首先是整体CSS的定义
ul {
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:"\00a0";
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:"\00a0";
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，提供的只是一种思路，看自己从简单的东西发掘出什么。
本文固定链接: https://www.weisay.com/blog/plan-sns-icons-with-css3.html | 威言威语
D神:
QQ:
夏日博客:
Richard:
FreshUncle:
林三:
芊芊:
叶夕青兮:
呵呵，不错，这种图标都好漂亮呀！
cool!!
给力
不错啊~~~
代码不少啊。。。
最头疼的是兼容问题
其实IE6麻烦点外，其他的兼容还是容易实现的
嗯，不错的分享，祝元旦快乐！
呵呵，同乐~
预祝博主元旦快乐
呵呵，你也快乐~
就是我之前用的那个
是么，呵呵
两天没有过来了，在折腾我自己的单栏的PJ呢，想在2011之前搞完，很多次想给你发个邮件问些问题，但都坚持下来了，还是想要能解决的自己全解决，这次的样子是我一直想要的，想了很久，原来是想等看别人的样式看透了再开始，但总觉得自己步子迈的不够大，终于狠了一下心，开工了……
对于CSS，真的所知太少了，所以总喜欢呆在你这里，感染一些灵气吧……
新年快乐！！！！！嗨呸牛耶~~~~
呵呵，想当初我也是时时刻刻的研究PJBlog的。
话说自己动手学的更多。
哇哦、牛，CSS3 强大啊！
恩，CSS3是比较强大，配合HTML5就更棒了
魔女来也。。。
图片圆角貌似IE下不支持。。。一如我的魔板头图。。
IE9以下的都不支持CSS3，可惜啊~
这个不错哦，蛮漂亮的图片，我一会也去试试。
哈哈，是的，国外的Logo相对国内的要简洁。
是啊。嘿嘿，新年快乐哦。
老兄爆猛料了？先偷下去研究研究……嘿嘿……
我也是无意发现的，觉得挺实用的，就发上来额。
css最最烦人，个个浏览器都不一样 有时要要被他高峰了！
为神马看别人网页的风格都很漂亮 看自己的就觉得不三不四
兼容一直是个比较麻烦的问题，当然，高质量的CSS在兼容方面是很棒的。不用一个Hack去兼容所有浏览器。
对于CSS，我懂得几个简单的属性。这些我还看不懂。
先从CSS开始，CSS3等熟悉了CSS就上手快了
CSS3原来这么强大哟。。学习了。
哈哈，你应该经常写CSS吧
我也不怎么会~ 学习了
呵呵，不会吧，我以为你会很懂的
css原来这么强大的~~
是的，很强大
额css我还是不行……
其他行就OK了
CSS啊，不想搞
没那水平也没那时间。。。
其实CSS是所有代码中最容易上手的了。
呃，看到这些东西真让人头痛。
额，怎么会头痛呢，欣赏就可以了
不错，学习一下！
恩，的确值得学习的
CSS是月来月强大了
一直都很强大，就是浏览器不给力啊
学习一下！
很有必要~
嗯。都相当不错啊。
恩，很适合初学者。