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

Google Güvenlik Teknoloji Programlar Sosyal Medya Flash Oyunlar Web Siteleri Web Teknolojileri PDF Önizleme Aracı Virüs Tarama Aracı Link Şifreleme Aracı PageRank Ölçme Aracı		TCP-IP VoIP GSM Fiber Optik WiMAX SEO Flash Htaccess Web Tasarım Web Programlama
HABERLEN Haberlen.com domain adresi satılıktır. Domain for sale ( 125*125 ) - SPONSOR - REKLAM ALANI SPONSOR OLMAK İSTER MİSİNİZ? İnterneti En Çok Kullanan İlk 20 Ülke ve Penetrasyonları 3 Boyutlu Flash Resim Döndürmeleri/Slider Yapın Telifsiz Çok Kaliteli Vektör Grafik Çalışmaları Ücretsiz Yüzlerce Yansıma Özellikli ve Monokrom İkon 80 Adet Pürüzsüz ve Parlak İkon Blog ve Web Sitelerini Mobil Sitelere Online Dönüştürme Servisleri Dünyanın En Çok Ziyaret Edilen İlk 1000 Sitesi İnternete Koyduğunuz Resimlerden Adresinizin Bulunabileceğini Biliyor Muydunuz Ülkelere Göre Google Arama Motoru Pazar Payları Yükselen Teknoloji Gerçek-Zamanlı Arama Rapidshare İndirme Kısıtlamasını Ortadan Kaldırın Pratik İnternet Hız Testleri 4Shared.com'da Ücretsiz Film, Müzik ve E-Kitap Arama Rapidshare ile Video, Film, Müzik ve Program İndirin 1000'in Üzerinde iPhone Uygulaması ve Programı Ücretsiz Cep Telefonu Videoları (.3gp) Blow Up, Klasik Top Vurma-Patlatma Oyunu Arrow Shooter, Adamın Kafasındaki Elmayı Vurun Ücretsiz 3B Animasyon, Film ve İçerik Yapma Programı Online Açık Kameraları Bulmak

E-Siber.com » Web Programlama » 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:"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;
}