用纯css3和html来制作一些社交媒体的图标，虽然没有图片和javascirpt,css3配合 html也能实现这些图标。

    html代码如下：

div class="content">
  <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>
</div>

css代码如下：

body {
    padding:0;
    margin:0;
    font:1em/1.4 Cambria, Georgia, sans-serif;
    color:#333;
    background:#fff;
}
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 trasparent;
    line-height:64px;
    ;
    text-decoration:none;
    text-shadow:0 -1px 0 rgba(0,0,0,0.5);
    border-radius:5px;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
}
ul li a:hover, ul li a:focus, ul li a:active {
    opacity:0.8;
    border-color:#000;
}
.facebook a {
    position:relative;
    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;
    -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);
}
.twitter a {
    position:relative;
    border-color:#a8eaec;
    text-transform:lowercase;
    text-ind