E-Siber.com
M. Mekin Pesen
Sitede 1775 okunmaya değer yazı var.

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.A preview of the social media icons created using CSS

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

Diðer sosyal medyalarýn CSS kodlarý için aþaðýdaki "CSS kodlarý" baðlantýsýný týklayýnýz.

Demo: http://nicolasgallagher.com/demo/pure-css-social-media-...
CSS kodlarý: http://nicolasgallagher.com/demo/pure-css-social-me...


· · · · · · · ·
Yazan: | 16.03.2010 | 5458 kez okundu.

Yazılar E-Posta Kutunuza Gelsin:

Bu yazıyı izinsiz olarak alıp başka herhangi bir yerde yayınlayamazsınız (Bkz "dijital at hırsızı" kimdir?). Yazıların başka yerlerde yayınlanmasına ücreti mukabili izin veriyoruz. Yazıları izinsiz olarak başka bir yerde yayınlamanız, her türlü hukuki sonucu kabul ettiğiniz manasına gelir. Yazıları izin almak ve kaynak göstermek kaydıyla sadece kamu kurumları ve akademik araştırmacılar ücretsiz olarak kullanabilir. Bunların dışında kalan herkes ücret öder. Detaylar için bize ulaşın.

Yorum altyapısı: Disqus

Yukarı Çık

M. MEKİN PESEN
© 2007-2015 E-SİBER BİLGİ-İLETİŞİM TEKNOLOJİLERİ
E-Siber.com | E-Siber.net | ESiber.com | ESiber.net | RSS | Facebook | Twitter | E-Posta Aboneliği
IP: 54.198.196.102 | Yüklenme: 0.443 saniye. | Hakkımızda | İletişim | Reklam Verin | Site Politikaları | Atıflar