Blog Rounder / Border Radius dengan CSS3

Ini adalah cara membuat blog anda bergaya rounder atau pada sisi-sisinya melengkung manis.

silakan lihat contoh di bawah ini :

anda dapat melihat bentuk rounder pada kotak ini

Contoh di atas sebenarnya sangat sederhana:

-moz-border-radius: 5px; -Moz-border-radius: 5px;

-webkit-border-radius: 5px; -WebKit-perbatasan-radius: 5px;

border: 1px solid #000; border: 1px solid # 000;

padding: 10px;" > padding: 10px; ">

untuk masing masing berowser menggunakan nama yang berbeda pada penamaan roundernya
-moz-border-radius-topright lawanya -webkit-border-top-right-radius :
FireFox Safari dan Chrome

Mozilla / Firefox dan Safari 3 penggpojok kiri atas bulat.

Mozilla / Firefox dan Safari 3 pojok kiri atas

Mozilla/Firefox and Safari 3 pojok kanan bawah

Mozilla / Firefox, dan Safari 3 pojok kiri bawah bawah

Conto di atas menggunakan code di bawah ini
-moz-border-radius-topleft / -webkit-border-top-left-radius
-moz-border-radius-topright / -webkit-border-top-right-radius
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius

Baik Pahami kode di bawah ini :

-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-khtml-border-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-webkit-border-bottom-right-radius: 10px;

angka 10 menujukan nilai roundernya, semakin tinggi nilai maka akan semakin bulat.
cara penempatanya pun bisa di mana aja tergantung selera misal do footer, header, sidebar atau lainya.

kalau blog saya di bagian wraper lihat di bawah ini :

#wrap {

background: #FFF;

width: 960px;

margin: 10px auto 10px;

padding: 5px 10px;

position: relative;

border: 1px solid #CCC;

-moz-border-radius-bottomleft: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-topleft: 10px;

-moz-border-radius-topright: 10px;

-khtml-border-radius: 10px;

-webkit-border-top-left-radius: 10px;

-webkit-border-top-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-webkit-border-bottom-right-radius: 10px;

Posted in: Tutorial Blogger