Seiring dengan berjalannya waktu, saya mulai mengenal banyak mengenai CSS, khususnya CSS3. Pada CSS3 fitur lengkungan pada ujung itu dengan nama "border-radius". Fungsinya adalah menggantikan gambar yang biasanya dipakai, menjadi kode sederhana yang bisa diubah nilainya dengan mudah. Berikut ini adalah cara menggunakan properti border-radius.
Cara Menggunakan Properti CSS3 Border-radius
Dalam demo yang saya buat di bawah ini, saya membuat lima persegi dengan lebar dan tinggi 70 piksel. Setelah itu tiap-tiap persegi saya beri nilai border-radius yang berbeda. Secara berturut-turut saya beri nilai 0px, 4px, 8px, 16px, dan 50px.Dari demo di atas bisa kamu lihat bagaimana sebuah persegi bisa menjadi sebuah lingkaran apabila nilai dari border-radius-nya melebihi dari setegah tinggi maupun lebar persegi.
Kamu juga bisa melihat kode CSS3 yang saya pakai. Dalam penggunaan border-radius, ada sedikit perbedaan bagi masing-masing browser. Untuk browser Safari, Google Chrome, dan Opera Next; menggunakan properti "-webkit-border-radius". Untuk browser Mozilla Firefox versi lawas menggunakan "-moz-border-radius". Namun, pada Mozilla Firefox terbaru, cukup menggunakan "border-radius" tanpa prefiks "moz" lagi.
Bagaimana, mudah bukan? Jika dibandingkan dengan menggunakan gambar untuk membuat lengkungan pada ujung; menggunakan properti border-radius jauh lebih mudah dan cepat. Ditambah lagi penggunaannya dinamis, tanpa harus memperhitungkan lebar sebuah elemen <div>. Selamat mencoba :)
Tidak ada komentar:
Posting Komentar