Membuat Efek Lengkung Di Blog

IDEINI| Membuat Efek Lengkung Di Blog Tutorial Blogging kali ini saya akan berbagi cara Membuat Efek Lengkung pada sudut sudut di blog, pastinya pernahkan lihat blog yang memiliki garis sudutnya tidak siku alias melengkung, bukan hanya di garis bahkan di kolom postingan, navbar , header, dll, itu semua dapat dibuat hanya dengan menambahkan kode berikit, menurut saya cara ini juga tidak terlalu sulit, karena hanya melakukan copy paste kode, terus disesuaikan sedikit dan selesai, mau tahu caranya? Oke langsung saja ini kode CSS Membuat Efek Lengkung Di Blog :

-moz-border-radius => kode yang ini akan membuat semua sudut yang diinginkan melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah

-moz-border-radius-bottomright => yang ini akan membuat garis melengkung bagian kanan bawah

-moz-border-radius-bottomleft => ini di gunakan untuk membuat garis lengkung dibagian  kiri bawah.

-moz-border-radius-topright =>  untuk garis melengkung bagian kanan atas

-moz-border-radius-topleft => ini untuk garis melengkung bagian kiri atas

Dibawah ini sedikit contoh penempatan Kode di atas

-moz-border-radius:10px;

Nah ada di ats terlihat ada penambaha nilai 10px; dibelakang kode tersebut.  itu lah nilai lengkung yang akan di tambahkan. Nilainya tidak harus sama seperti contoh, kamu bisa merubahnya sesuai keinginan kamu. setelah nilai tersebut sudah di tentukan kamu ytinggal meletakan dimana kamu ingin membuat efek melengkung.

Berikut adalah contoh penempatan Kode diatas :

1   1.     Pada Bar Navigasi:

#navigation {

 -moz-border-radius:10px;

  width:980px;

  height:45px;

  background:#fff;

   }

2.   2.     Pada Header:

/* Outer-Wrapper */

#outer-wrapper {

-moz-border-radius:10px;

  background:#fff;

  width: 980px;

  margin:20px auto;

  padding:10px;

 

3.   3.     Pada Bagian Posting:

.post {

-moz-border-radius:10px;

  background:#fff;

  padding:5px;

  margin-bottom:10px;

    }

4.      Pada Sidebar:

#sidebartop-wrapper {

-moz-border-radius:10px;

  background: #fff;

  width: 320px;

  float: right;

  margin-bottom:10px;

  word-wrap: break-word;

  overflow: hidden;

   }

Itu bebrapa contoh penempatan, kamu tinggal mengganti kode yang kamu inginkan, mudah bukan?

Ops tapi tunggu dulu, Ternyata kode diatas hanya bekerja di Firefox, nah  bagaimana caranya agar pengguna Chrome, Safari, dll juga dapat melihat efek lengkung yang ada pada blog kamu? Ini dia carnya, yaitu menambahkan kode CSS baru di bawah kode CSS yg telah saya jelaskan  di atas, :

• -webkit-border-radius => membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
• -webkit-border-bottom-right-radius => membuat garis melengkung kanan bawah
• -webkit-border-bottom-left-radius =>  membuat garis kiri bawah melengkung
• -webkit-border-top-right-radius => membuat garis melengkung kanan atas
• -webkit-border-top-left-radius => membuat garis melengkung bagian kiri atas

Untuk para pengguna Opera, cukup hilangkan -moz-, -webkit- atau -khtml- sehingga jadinya seperti ini:

• border-radius => membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
• border-bottom-right-radius => membuat garis melengkung kanan bawah
• border-bottom-left-radius => membuat garis kiri bawah melengkung
• border-top-right-radius => membuat garis melengkung kanan atas
• border-top-left-radius => membuat garis melengkung bagian kiriatas