Be Creative With Border Radius

1 menit
Border Radius Creative

Old but Gold, merupakan quote yang tepat untuk properti border radius ini. Hampir semua website menggunakan properti ini dengan tujuan untuk membuat lengkungan disudut gambar ataupun membuat gambar menjadi lingkaran. Untuk properti ini sebenarnya merupakan properti yang ditujukan untuk membuat elips pada tiap sudut element atau gambar. Sedikit menyinggung matematika, perhitungan elips berdasarkan 2 yakni secara horizontal dan vertikal.

Bagaimana dengan kerja border radius ini sehingga dapat membuat lengkungan pada tiap sudut element atau gambar ialah dengan menentukan jarak elips pada tiap sudutnya. Penulisan properti ini merupakan shorthand untuk border-top-left-radius, border-top-right-radius, border-bottom-right-radius dan border-bottom-left-radius.

img {
border-radius: 25px;
}

Properti border radius diatas akan diterapkan pada element img, dan jarak elips secara horizontal dan vertikal disetiap sudut bernilai sama yakni 25px sehingga terlihat pemotongan pembentukan lengkungan sesuai ukuran elips tersebut. Elips terlihat efek kisi lingkaran karena jarak elips secara horizontal dan vertikal sama dan menjadikan itu sebagai jari-jari ( r = 25px ).

Bagaimana jika jarak elips secara horizontal dan vertikal berbeda. Border Radius memungkinkan hal tersebut menggunakan value .. / .. perbandingan nilai horinzontal dan vertikal dengan pemisahnya menggunakan garis miring atau slash ( / ).

“Jika nilai diberikan sebelum dan sesudah garis miring, maka nilai sebelum garis miring mengatur radius horizontal dan nilai setelah garis miring mengatur radius vertikal. Jika tidak ada garis miring, maka nilai-nilai mengatur kedua jari-jari sama. ” W3C

Berdasarkan pernyataan tersebut, border radius memungkinkan menyiptakan efek lengkungan yang lebih bervariasi dengan dapat mengubah nilai lengkungan secara horizontal dan vertikal disetiap sudutnya. Berikut contoh untuk membuat perbedaan antara penggunaan / dan tidak.

img.first {
 border-radius: 40px 80px;
}

img.second {
 border-radius: 40px / 80px;
}

Terlihat perbedaan diantara keduanya. Pada gambar dikiri border radius menerapkan 40px pada border-top-left-radius, border-bottom-right-radius dan 80px pada border-top-right-radius, border-bottom-left-radius. Sedangkan gambar dikanan border radius menerapkan 40px / 80px pada semuanaya (border-top-left-radius, border-bottom-right-radius, border-top-right-radius, border-bottom-left-radius).

Dengan begitu anda dapat mengkreasikan elips tersebut dalam bentuk yang lain sehingga dapat membentuk tampilan selain bulat atau lengkungan sudut akan tetapi bentuk abstrak lainnya. Dengan mengerti penggunaan shorthand css dan menerapkan value .. / .. sehingga dapat mengatur jarak horizontal dan vertikal secara terpisah.

img.advanced {
 border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}
wordpress-plugins

Bagaimana hasil border radius, terlihat memiliki visual yang lebih baik kan. Terlihat sulit untuk menentukan nilai dari border-radius tersebut, akan tetapi Tim Fancy telah menyiapkan generator sehingga dapat memudahkan anda untuk menentukan bagaimana membentuk sudut tersebut. Silahkan kunjungi website mereka Fancy Border Radius Generator.

4+

Leave a Reply

Your email address will not be published. Required fields are marked *