CSS Rounded Corners

http://www.schillmania.com/image/projects/even-more-rounded-corners-witih-css.png
Assalamu'alaikum wr.wb
eh .. Ketemulagi di hari yang sama. Sebelumnya saya Posting CSS3 Menu With Gradient Background Color, kali ini saya mau posting yang lain nee ..
CSS Rounded Corners, Pantes nee buat Blockquote Blog kamu ..
langsung Ke tutornya sobat Cekidot ..

1. Login Blogger Kalian.
2. Rancangan --> Edit HTML
3. Cari Elemen ]]></b:skin
4. Masukan Code CSS Di bawah ini di atas Code tadi ..

#rnd_container {background: #DFD5B9; margin:1px;}
   
    .rnd_top, .rnd_bottom {display:block; background:#DFD5B9; font-size:1px;}
    .rnd_b1, .rnd_b2, .rnd_b3, .rnd_b4 {display:block; overflow:hidden;}
    .rnd_b1, .rnd_b2, .rnd_b3 {height:1px;}
    .rnd_b2, .rnd_b3, .rnd_b4 {background:#FFFFFF; border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC;}
    .rnd_b1 {margin:0 5px; background:#CCCCCC;}
    .rnd_b2 {margin:0 3px; border-width:0 2px;}
    .rnd_b3 {margin:0 2px;}
    .rnd_b4 {height:2px; margin:0 1px;}
   
    .rnd_content {
    display:block;
    border:0 solid #CCCCCC;
    border-width:0 1px;
    padding: 4px;
    background:#FFFFFF;
    color:#000000;
}
Keterangan : Kode Yang Berwarna gnti dengan warna yang kalian inginkan.

5. Simpan Template.
6. Untuk Mengaktifkan CSS Tersebut, kita memerlukan HTML Code, Masukan Kode HTML di bawah ini di Mana aja, di Postingan, Di widget, dan lain-lain.

<div id="rnd_container">
<b class="rnd_top"><b class="rnd_b1"></b><b class="rnd_b2"></b><b class="rnd_b3"></b><b class="rnd_b4"></b></b>
<div class="rnd_content">
Tulisan Loe
</div>
<b class="rnd_bottom"><b class="rnd_b4"></b><b class="rnd_b3"></b><b class="rnd_b2"></b><b class="rnd_b1"></b></b>
</div>

7. Selesai deh.

DEMO :





Tulisan Gue




10 komentar:

Harrys mengatakan...

Pertamaxxx sob!

mohon diperjelas demo nya sob, masih belum ngerti nih... :(

[./Forbiden-403] mengatakan...

Rounded Corners adalah Efek melengkungkan Background pada Posisi tertentu, dan lengkungan tersebut dapat di udah sesuai Ukuran kita ..
itu aja penjelasanya, semoga dapat menjawab pertanyaan anda, klo kurang Jelas tanya mbah gugleaja ya hehehe :D =))

ICAH BANJARMASIN mengatakan...

Mantef banget nih tutornya..pokoknya sip banget dahhh...hahahhyyyy

[./Forbiden-403] mengatakan...

wah ,,
makasih Om Icah ,,

iman@sampeweweh mengatakan...

keren tutorialnya nih hehe makin keren aja hoho

Underground404 mengatakan...

Hampir sama yah sob.. :D

[./Forbiden-403] mengatakan...

@Sampeweweh : biasa aja kok kak ..
@Alam : ya kaya gitu sob .

Black Angel Syndicate mengatakan...

wah asik nhe keren sob :)
Absen siang sob

[./Forbiden-403] mengatakan...

Praktekin Titorialnya ya sob hehehe ..
Oke sob ..

[./Forbiden-403] mengatakan...

Sudah Folbek sob, maaf sob, Jangan Spam ya :D

Posting Komentar