Üzerinde çalıştığım bir haber sistemini hazırlarken etiket bulutu tasarımını uygulamam gerekiyordu. İnternette bulduğum bir PSD (Photoshop) dosyasını CSS-XHTML'e dökerken bu tasarımı sizlerle paylaşmak istedim.
Öncelikle verilen tasarımın CSS betiklerini hazırlıyoruz.
CSS Betikleri
.etiket-bulutu{}
.etiket-bulutu a{margin:0 5px 7px 0px;display:inline-block;color:#996633;}
.etiket-bulutu a .sol{background:url('../images/bg-etiket-bulutu-sol.png');width:18px;height:23px;display:inline-block;float:left;}
.etiket-bulutu a .orta{background:url('../images/bg-etiket-bulutu-orta.png');height:23px;display:inline-block;float:left;}
.etiket-bulutu a .sag{background:url('../images/bg-etiket-bulutu-sag.png');width:10px;height:23px;display:inline-block;float:left;}Şimdi ise HTML betiklerini hazırlayalım.
HTML Betikleri
Detaylı bilgi ve indirme adresi:
ontedi.com