CSS ile resim kullanmadan oval köşeli tablolar

20 Ağustos 2007, 00:01 tarihinde yazılmış olup, 1,941 kez okunmuş ve 15 yorum almış

Etiketler:

CSS ile oval köşelere sahip katmanlar yaratmak çok kolaymış halbuki :D 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.

3.67
Yazı ebatı büyüt Yazı ebatı küçült Arkadaşına yolla Bu yazıyı paylaş Yorum yap Yazının geri izleme adresi Yazıyı XML ile takip et


Kullanmanız gereken CSS kodları şöyle;

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

Ve katman etiketlerimiz ise şunlar;

PLAIN TEXT
HTML:
  1. <div id="metin_banner">
  2. <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
  3. <div class="xboxcontent">
  4.  
  5. <h1><a href="">Örnek Başlık</a></h1>
  6. <h2>Örnek bir açıklama</h2>
  7. </div>
  8. <b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
  9. </div>

Sonuç ise şöyle oluyor :)


Örnek Başlık

Örnek bir açıklama

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

Bunu okuyanlar, alttakileri de okudu

Bu yazılar da ilginizi çekebilir ;)

Wordpress.Org Lisans Kullanım Şartları Dmry.net Hakkında

Kullanım şartları yerine getirilmeden hiçbir şekilde kopyala-yapıştır yapılamaz.
eXTReMe Tracker