08
Agu
2009
Agu
2009
Cara membuat rounded corner box
Posted by: adminCara membuat rounded corner (sudut melengkung) tanpa menggunakan image (gambar).
Agar tampilan website/blog kita menjadi cantik dan lebih menarik, kita dapat membuat css style box dengan sudut melengkung untuk isi konten website/blog kita.
Berikut adalah langkah-langkah mudah untuk membuatnya:
Salin kode CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | /*Round corner*/ #xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10px; letter-spacing:1px; padding:0;} #xsnazzy h1 {font-size:2.5em; color:#fff;} #xsnazzy h2 {font-size:2em;color:#06a; border:0;} #xsnazzy p {padding-bottom:0.5em;} #xsnazzy h2 {padding-top:0.5em;} #xsnazzy {background: transparent; margin:0px;} .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:#FFF; border-left:1px solid #CCC; border-right:1px solid #CCC;} .xb1 {margin:0 5px; background:#CCC;} .xb2 {margin:0 3px; border-width:0 2px;} .xb3 {margin:0 2px;} .xb4 {height:2px; margin:0 1px;} .xboxcontent {display:block; background:#FFF; border:0 solid #CCC; border-width:0 1px; padding:10px;} |
Salin kode DIV
1 2 3 4 5 6 7 8 9 | <div id="xsnazzy"> <b class="xtop"></b><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b> <div class="xboxcontent"> Isi konten website/blog kamu disini </div> <b class="xbottom"></b><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b> </div> |
Kode tersebut berfungsi dengan baik pada Internet Explorer, Mozilla Firefox, Opera dan Chrome.
Selamat mencoba!

memuat halaman
iklan




Postingan yang lain:




G ketemu gan.. kode css round cornernya…
trus peletakan kode di mana neeh…numpang promo pulsa murah ya.. hehehe…;)
masa gak ketemu? kan ada diatas..
mantabs bro manfaat sekali nih …
thank a lot dari dulu nyari artikel ini baru ketemu di sini. Langsung aku coba nih. moga2 bisa
nice tips bro!!!
tulisannya dan latar belakang belum maching kawan, jadi gak jelas kalau di baca. trims
makasih masukannya,,, nanti themesnya aku ganti klo ada waktu,,
Thanks gan…
makasih nih tutorialnya nyari2 eh ketemu web ini thx mas admin
ya, sama2.. makasih kunjungannya..
kalo buat postingan di wen.ru bisa gak?
klo situs wen.ru memperbolehkan utk edit html, bisa langsung dicoba triknya.
utk membuat sudut lengkung modern dgn css3 bisa dilihat dihalaman ini >> sudut lengkung css3