Minggu, 22 Januari 2012

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:

  1. Pertamaxxx sob!

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

    BalasHapus
  2. 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 =))

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

    BalasHapus
  4. keren tutorialnya nih hehe makin keren aja hoho

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

    BalasHapus
  6. wah asik nhe keren sob :)
    Absen siang sob

    BalasHapus
  7. Keduaxx
    mantap infonya gan !

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

    BalasHapus
  8. Sudah Folbek sob, maaf sob, Jangan Spam ya :D

    BalasHapus