Ö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>
