Forum
Aktif konular
Üyeler
Kurallar
Arama
CSS İle Etiket Bulutu Tasarımı CSS İle Etiket Bulutu Tasarımı
-
Bir projede PSD olarak verilen tasarımın CSS ile HTML'e dökülmüş halini sizlerle paylaşıyorum.
Ü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<div class="etiket-bulutu"> <a rel="tag" href="http://www.ontedi.com" title="Asp.Net"> <span class="sol"></span> <span class="orta">Asp.Net</span> <span class="sag"></span> </a> <a rel="tag" href="http://www.ontedi.com" title="Java"> <span class="sol"></span> <span class="orta">Java</span> <span class="sag"></span> </a> <a rel="tag" href="http://www.ontedi.com" title="CSS3"> <span class="sol"></span> <span class="orta">CSS3</span> <span class="sag"></span> </a> <a rel="tag" href="http://www.ontedi.com" title="SQL"> <span class="sol"></span> <span class="orta">SQL</span> <span class="sag"></span> </a> </div>Örnek
İndirme linki ve detay: http://www.ontedi.com/css/css-ile-etiket-bulutu-tasarimiontedi tarafından 09/Eki/15 12:28 tarihinde düzenlenmiştir
Kısayol
Şikayet
Özel Mesaj
Alıntı yap
Cevapla