3 Komentar

Tampilan cantik dengan CSS “rounded corner” radius

Aku siku, kaku dan berliku

Sering kita jumpai tampilan siku untuk garis tepi di banyak halaman web terkadang desain ini memberikan kesan kaku dan membosankan. Ada beberapa cara untuk membuat garis tepi tersebut menjadi membulat,

Code is poetry CSS is art. ~Sheri – wp team

salah satunya dengan teknik menambahkan gambar pada sudut-sudut yang ingin kita rekayasa sehingga terkesan membulat, namun hal ini mengharuskan kita mengolah gambar sudut terlebih dahulu, lalu harus menempatkannya dengan tepat supaya rapi.

rounded edge image

gambar untuk membentuk sudut membulat bagian atas-kiri

Ada cara yang lebih mudah tanpa gambar kita bisa menggunakan elemen radius pada CSS untuk membuat tampilan garis tepi yang tadinya siku menjadi membulat sehingga tampil lebih menarik.

Oranye itu menarik

<span style="font-size: 2em;
background-color: #ff9900;
color: #ffffff;
font-style: italic;
border-radius: 7px;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
padding: 10px;">
Oranye itu menarik
</span>

Lalu bisa kita kembangkan sebuah bentuk dengan perpaduan siku dan rounded,

Go Green!

border-top-left-radius: 12px;
border-bottom-right-radius: 12px;
-moz-border-radius-topleft: 12px;
-moz-border-radius-bottomright: 12px;
-webkit-border-top-left-radius: 12px;
-webkit-border-bottom-right-radius: 12px;

Dan jangan berhenti, gali semua kemungkinan yang ada,

Ya?

border-top-left-radius: 25px;
border-top-right-radius: 25px;
border-bottom-left-radius: 25px;
-moz-border-radius-topleft: 25px;
-moz-border-radius-topright: 25px;
-moz-border-radius-bottomleft: 25px;
-webkit-border-top-left-radius: 25px;
-webkit-border-top-right-radius: 25px;
-webkit-border-bottom-left-radius: 25px;

Oh ya umur dari radius ini cukup muda jadi mulai didukung pada IE9+, Firefox 4+, Chrome, Safari 5+, dan Opera.

Sebelum radius menjadi standar ada -moz- yang hanya berjalan di browser Mozilla,  juga -webkit- untuk Safari dan -o- untuk Opera.

Selamat mencoba.

3 comments on “Tampilan cantik dengan CSS “rounded corner” radius

  1. terima kasih banyak om,
    artikelnya sangat bermanfaat..i like this

  2. Terima kasih om, lengkap dengan visualnya jadi tambah ngerti

Menurut anda bacaan ini bermanfaat? Ada tambahan? Atau mungkin mencari jawaban lain? Tulis disini Ok (:

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: