CSS ile Etiket Bulutu Tasarımı

Üzerinde çalıştığım bir çizgi film 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>

Kod olarak tüm hazırlıkları tamamladık. Şimdi ise projemizin tarayıcıda nasıl görüneceğine bakalım.