CSS ile oval köşelere sahip katmanlar yaratmak çok kolaymış halbuki Yok yok herhangi bir javascript kodu kullanmadan yapacağız bunu. Uzun araştırmalarım sonucunda örnek olarak edindim bir siteden. Ama hangisinden, onu unuttum bak. Fakat yinede eline sağlık arkadaşın.

Kullanmanız gereken CSS kodları şöyle;

<style type="text/css">
#metin_banner {width:200px;}
#metin_banner h1, #metin_banner h2 {margin:0 10px; letter-spacing:1px;}
#metin_banner h1 {font-size:2.5em; color:#fff;}
#metin_banner h2 {font-size:2em;color:#06a; border:0;}
#metin_banner h2 {padding-top:0.5em;}
#metin_banner {background: transparent; margin:1em;}
.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#ccc; border-left:1px solid #08c; border-right:1px solid #08c;}
.xb1 {margin:0 5px; background:#08c;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}
.xboxcontent {display:block; background:#ccc; border:0 solid #08c; border-width:0 1px;}
</style>

Ve katman etiketlerimiz ise şunlar;

<div id="metin_banner">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">

<h1><a href="">Örnek Başlık</a></h1>
<h2>Örnek bir açıklama</h2>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>

Sonuç ise şöyle oluyor

Üstteki önizleme biraz patlıyor olabilir. Ama bunun nedeni, sitemin CSS kodlarının bu alanlara da etki etmesi. Normalde ise problemsiz

Merak Ettikleriniz

• CSS dosyalarınızı gzip ile optimize edin
• Internet Explorer 6, Float, Margin-Left Problemi
• Internet Explorer 6 ile 16px altında katman yüksekliği
• CSS ile basit bir ilerleme durum çubuğu yapımı
• CSS Teması Hazırlama Aracı