Navigation

RSS: articles / comments



HackeR FrienD.Net

Bilgi Güçtür, Paylaştıkça Büyür!

Mardinhack - deneme

resimleri oval yapma

Css Resim kullanmadan oval köşeli tablolar
oval köşelere sahip katmanlar yaratmak çok kolaymış halbuki Yok yok herhangi bir javascript kodu kullanmadan yapacağız

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>
 
Bugün 1 ziyaretçi (2 klik) kişi burdaydı!


Bu web sitesi ücretsiz olarak Bedava-Sitem.com ile oluşturulmuştur. Siz de kendi web sitenizi kurmak ister misiniz?
Ücretsiz kaydol