April 10, 2013 Rounded border

Tampilan web cantik dengan CSS “rounded corner” radius

Tampilan web yang cantik atau ganteng siapa sih yang ga tertarik? Ada banyak cara untuk mendandani web rounded corner ala radius-nya CSS adalah salah satunya, gunakan dengan tepat maka voila! web kamu pasti tambah menawan :-).

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

[sourcecode language=”css” highlight=”5,6,7″]
<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>
[/sourcecode]

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

Go Green!

[sourcecode language=”css”]
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;
[/sourcecode]

Dan jangan berhenti, gali semua kemungkinan yang ada,

Ya?

[sourcecode language=”css”]
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;
[/sourcecode]

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.

Ditulis Oleh Muslim Pribadi M. (Instruktur Binus center bandung)
Baca tulisan aslinya di http://wp.me/pqgch-dt

Binus Center Bandung & Bintaro lembaga kursus & pelatihan komputer menyediakan materi-materi kursus web design, HTML, CSS dan Javascript yang disusun sesuai dengan trend teknologi terbaru serta berstandar internasional. Dan jangan khawatir bingung setelah lulus mau kerja dimana!! Binuscareer akan memberikan bantuan informasi mengenai lowongan pekerjaan bagi binusian.

Share This:

Di-tag pada:

Tinggalkan Balasan

Alamat surel Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *