Selasa, 25 Januari 2011
Membuat Rounded Corner dengan CSS di Blog
Satu lagi cara untuk modifikasi blog yang akan saya bahas disini adalah dengan menggunakan Rounded Corners. Rounded corners atau sudut melengkung adalah lengkungan atau belokan pada sudut dari suatu bentuk bangunan persegi. Sudut melengkung ini biasa digunakan dalam pembuatan design template agar template menjadi tampak lebih menarik dan tidak terlihat terlalu kaku dan monoton. Pada umumnya code css yang digunakan untuk membuat rounded corners adalah :
-moz-border-radius:3px;>> berasal dari Mozilla dan digunakan pada Firefox-khtml-border-radius:3px;>> berasal dari Linux dan digunakan pada Konqueror-webkit-border-radius:3px;>> berasal dari Safari dan digunakan pada untuk mac dan windowsborder-radius:3px;>> hanya merupakan spesifikasi dari standart CSS3.
1. Rounded corners pada seluruh sudut
<div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius: 10px; width: auto;">Rounded corners seluruh sudut</div>
Rounded corners seluruh sudut
2. Rounded corners hanya pada sudut atas
<div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; width: auto;">Rounded corners hanya pada sudut atas</div>
Rounded corners hanya pada sudut atas
3. Rounded corner hanya pada sudut bawah
<div style="background-color: #F7F8E0; border: 2px solid rgb(66, 66, 66); height: auto; margin: 10px 0px; padding: 10px; text-align: center; -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px; width: auto;">Rounded corners hanya pada sudut bawah</div>
Rounded corners hanya pada sudut bawah
Penerapan Rounded Corner di Sidebar
Jika temen-temen ingin membuat rounded corners itu pada sidebar tinggal menambahkan kode yang berwarna merah pada kode #sidebar .widget { contohnya seperti ini :
#sidebar .widget {
.......................
.......................
.......................
-moz-border-radius: 10px;
}
Kode yang berwarna kuning adalah kode sidebar pada template anda, karena setiap template mempunyai kode sidebar yang berbeda-beda di bawah kode #sidebar .widget { saya kasih titik-titik. Anda bisa ganti 10px sesuai dengan selera masing-masing. Sama halnya jika anda ingin membuat rounded corner di main-wrapper, content-wrapper, outer-wraper anda tinggal menambahkan kode yang berwarna merah seperti contoh diatas.
Penerapan rounded corners diatas hanya beberapa contoh dari begitu banyak yang dapat kita lakukan dengan menggunakan border radius. Silahkan anda kreasikan sendiri dan semoga berhasil.
Label:
tutorial blog