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




11 ... Skip ke Kotak Komentar

22 Januari 2012 21.13

Pertamaxxx sob!

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

22 Januari 2012 21.39

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 =))

23 Januari 2012 09.06

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

23 Januari 2012 11.53

wah ,,
makasih Om Icah ,,

23 Januari 2012 13.05

keren tutorialnya nih hehe makin keren aja hoho

23 Januari 2012 13.38

Hampir sama yah sob.. :D

23 Januari 2012 14.07

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

23 Januari 2012 14.40

wah asik nhe keren sob :)
Absen siang sob

23 Januari 2012 18.07

Praktekin Titorialnya ya sob hehehe ..
Oke sob ..

29 Januari 2012 22.18

Keduaxx
mantap infonya gan !

@ http://demons-666.blogspot.com

30 Januari 2012 17.16

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

Tambahkan Komentar Anda

Peraturan :
1. Dilarang berkomentar dengan kata-kata yang kotor, Pornografi, SARA
2. Dilarang Poskan Spam
3. Dilarang poskan URL yang tidak perlu
Sekian Pemberitahuan Dari Saya
Hati-hati dengan Komentar Anda, anda Komentar Bukan Spam, Saya Pasti akan Follow anda, This Blog Dofollow

 
Yahoo Messenger
Send Me IM!
Google Plus
Add Me To Your Circle!
Twitter
Follow Me!
Facebook
Add My Facebook
Original Template By Belajar SEO Blogspot - Himajiesized By Dayz Hidayat - Converted By [./Forbiden-403]