Tamamen CSS ile Yapılmış Sosyal Medya İkonları
Nicolas Gallagher isimli bir tasarımcı tarafından tamamen saf CSS ve HTML ile yapılmış sosyal medya ikon setinden bahsedeceğiz. Yeni nesil CSS3 ile yapılmış bu sette kesinlikle ne bir resim ne de javascript kullanılmıştır.
HTML kodlama kısmı için sadece bildiğimiz sırasız <ul><li></li></ul> etiketleri kullanılmış.
HTML kısmı:
<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>
<ul> CSS kısmı:
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 ikonunun CSS kodu:
.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:"