Blog Ping

Kamis, 11 November 2010

Rounded Corner

Apakah anda sering menemui blog yang kelihatan melengkung seperti blog ini?
Itu namanya Rounded Corner
Sebagai contoh:











Berikut cara membuatnya:
  1. Tentukan bagian yang akan anda ubah menjadi melengkung
  2. Misalnya bagian post maka cari kode cssnya
  3. Edit seperti berikut:
Full rounded corner :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px; }
Rounded corner di atas :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-khtml-border-radius-topleft: 10px;
-khtml-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px; }
Rounded corner di kiri atas :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius-topleft: 10px;
-webkit-border-radius-topleft: 10px;
-khtml-border-radius-topleft: 10px;
border-top-left-radius: 10px; }
Rounded corner di bawah :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-radius-bottomleft: 10px;
-webkit-border-radius-bottomright: 10px;
-khtml-border-radius-bottomleft: 10px;
-khtml-border-radius-bottomright: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px; }

Catatan:
  1. Kode warna merah adalah Kode yang harus ditambahkan
  2. Kode -moz-border-radius digunakan untuk FF, -webkit-border-radius untuk Chrome dan Safari, -khtml-border-radius untuk browser-browser lama yang mendukung kode ini, serta border-bottom-left untuk pengecekan terhadap browser-browser baru yang mungkin mendukung kode ini.