Sabtu, 13 Oktober 2012

Cara mengubah Sudut Sidebar blok jadi melengkung

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:

-moz-border-radius:10px;

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;
}
Pada Header:

/* Outer-Wrapper */
#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







2 komentar: