Tamamen CSS ile Yapılmış Sosyal Medya İkonları

teknoloji haberinin
değil, bilgisinin
peşinde...

"WEB"in Son Çıkan Önemli Yazıları

Revaçta Olan Konular

Sitede şu an 1546 yazı bulunmaktadır.

Follow @esibercom

Gerçek İnternet Hızı Ölçüm ve Test Aracı

Online Virüslü ve Zararlı Siteleri Tespit Edin

Özel Yazılar

Çok Okunanlar

Son Yazılar

Rastgele Yazılar

Son Yorumlar

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:"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;
}