Pada postingan kali ini saya akan memberikan tutorial dan trik tentang merubah sudut sidebar agar menjadi melengkung. Dibawah ini saya memberikan keterangan tentang fungsi dari beberapa -moz-border-radius. berikut keterangannya :
- -moz-border-radius => ini akan membuat segala sudut jadi melengkung, baik itu kiri atas, kiri bawah, kanan atas dan kanan bawah
- -moz-border-radius-bottomright => ini membuat garis melengkung kanan bawah
- -moz-border-radius-bottomleft => ini di gunakan untuk membuat garis kiri bawah melengkung
- -moz-border-radius-topright => ini untuk garis melengkung kanan atas
- -moz-border-radius-topleft => ini untuk garis melengkung bagian kiriatas
Nah untuk membuat sudut nya melengkung anda harus menambahkan nilai
pada ujung kode tersebut, ini untuk menentukan seberapa melengkungkah
sudut yang kita mau. Misalnya kita akan menambahkan kode berikut pada
CSS template:
Nilai 10px tersebut itu lah nilai lengkung yang akan di tambahkan.
nilainya tidaklah mutlak seperti itu. anda bisa merubahnya dengan nilai
yang lain. tergantung keperluan anda. setelah nilai tersebut sudah di
tentukan anda tinggal memasukkannya pada kode CSS template yang ingin
anda berikan sudut melengkung.
1. Pada Bar Navigasi:
|
#navigation {
-moz-border-radius:10px;
width:980px;
height:45px;
background:#03ABFF;
}
|
|
#outer-wrapper {
-moz-border-radius:10px;
background:#fafbfb;
width: 980px;
margin:20px auto;
padding:10px;
-moz-box-shadow: 0px 0px 15px #000030;
-khtml-box-shadow: 0px 0px 15px #000030;
-webkit-box-shadow: 0px 0px 15px #000030;
position: relative;
z-index: 90;
}
|
3. Pada Bagian Posting:
.post {
|
-moz-border-radius:10px;
background:#03ABFF;
padding:5px;
margin-bottom:10px;
}
|
4. Pada Sidebar:
|
#sidebartop-wrapper {
-moz-border-radius:10px;
background: #03ABFF;
width: 320px;
float: right;
margin-bottom:10px;
word-wrap: break -word;
overflow: hidden;
}
Coba lihat blog saya kerenkan.
Kemudian tinggal disave template atau anda priview, lihat hasilnya... apabila anda kurang mengerti selahkan tinggalkan komentar anda.... semoga bermanfaat ya
|
|
|
|
|
| | | | | | | | | | | | | | | | | | | |
|
|
|
langsung praktek sob..
BalasHapusOke
Hapus