CSS ile 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 ç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>
Örnek
CSS ile Etiket Bulutu Tasarımı

Yorumlar

  • Doruk Efe

    Doruk Efe:

    2 yıl önce

    Merhaba hocam. Örneğinizi kullanmak üzere indireceğim. Blogger için bunu kullanmak istiyorum yayınlayacak olduğum her konu için ayrı ayrı kodlar üretip içerikleri düzelterek, her konumun altına etiketleri gireceğim örneğinizle fakat kodlarınızı denerken şöyle bir şeye rastladım. Etiketleri ekledikçe sadece üçer üçer aşağı iniyor. Bu kodları üçerli bir şekilde aşağı inecek değil de, sıralı bir şekilde ekledikçe sağa gidecek şekilde ardından konunun en sağına gelince görüntü bozulmadan bir alt satıra otomatik olarak atlayacak şekilde nasıl ayarlayabiliriz. Ben ileri düzey pek anlamam da, bu konuda bana yardımcı olur musunuz lütfen.
    5 cevapla
  • Yönetici Yorumu:

    Yaptığım örnekte sıralı bir şekilde gitmektedir. Görsel olarak verdiğim örnekte alan sınırlı olduğu için dördüncü etiket aşağıya inmiş şekilde görülmektedir. Oysaki alanımız biraz daha geniş olduğunda yanyana sıralı bir şekilde durduğu görülecektir.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

EN

  • Popüler
  • Yeni
  • Son Yorum