Border Radius Pada CSS3
Border Radius Pada CSS3 – Border merupakan bagian dari materi CSSdua yaiitu Box Model. Untuk Border Radius sendiri merupakan pengembangan dari materi border yang ada pada CSS Box Model. Border digunakan untuk memberikan style pada pinggiran kotak yang kita buat dalam halaman HTML. sedangkan border radius digunakan untuk membuat setiap ujung dari setiap kotak menjadi tumpul. Semakin besar nilainya maka ujung setiap kotak semakin tumpul.
Untuk dimensi kotak sendiri ada sanggup berbentuk empat persegi panjang dan bujur kandang. Untuk satuan nilai yang dipakai pada border radius, kita bisa menggunakan pixel ( px ) & persentase ( % ).
Contoh penggunaan satuan pixel ( px )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border Pixel</title> <style> div { margin: dua0px auto; } .border1 { width: dua00px; height: dua00px; background-color: turquoise; border-radius: dua0px; } .borderdua { width: dua00px; height: dua00px; background-color: olive; border-radius: 100px; } </style> </head> <body> <div class="border1"></div> <div class="borderdua"></div> </body> </html>
Contoh penggunaan satuan persentase ( % )
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border Pixel</title> <style> div { margin: dua0px auto; } .border1 { width: 300px; height: dua00px; background-color: turquoise; border-radius: 10%; } .borderdua { width: 300px; height: dua00px; background-color: olive; border-radius: 50%; } </style> </head> <body> <div class="border1"></div> <div class="borderdua"></div> </body> </html>
Noted :
? Untuk penggunaan satuan border radius semakin besar nilainya maka akan semakin tumpul setiap ujung kotaknya.
● Ketika satuan nilai border radius semakin besar dan mendekati setengah atau 50% dari besar dimensinya, maka akan menjadi bentuk ‘lingkaran’ apabila dimensi tersebut berbentuk ‘bujur sangkar’. sehingga apabila nilai border radius lebih besar dari setengah atau 50% dari dimensinya maka tidak akan terjadi perubahan. karena sudut lingkaran sudah yang paling tumpul.
● Ketika satuan nilai border radius semakin besar dan mendekati setengah atau 50% dari besar dimensinya, maka akan menjadi bentuk ‘Elips’ apabila dimensi tersebut berbentuk ‘empat persegi panjang’. sehingga apabila nilai border radius lebih besar dari setengah atau 50% dari dimensinya maka tidak akan terjadi perubahan. karena sudut elips sudah yang paling tumpul.
Untuk modul Border Radius memiliki property menjadi berikut:
? Border Radius : Property ini dipakai untuk menaruh border radius untuk seluruh atau keempat sisi kotak seperti model diatas.
? Border-Top-Right-Radius : Property ini dipakai buat menaruh border radius hanya buat ujung sisi bagian kanan atas sebuah kotak.
? Border-Top-Left-Radius : Property ini dipakai buat menaruh border radius hanya buat ujung sisi bagian kiri atas sebuah kotak.
? Border-Bottom-Right-Radius : Property ini digunakan buat memberikan border radius hanya untuk ujung sisi bagian kanan bawah sebuah kotak.
? Border-Bottom-Left-Radius : Property ini dipakai buat menaruh border radius hanya buat ujung sisi bagian kiri bawah sebuah kotak.
Setelah kita mengetahui property apa saja yang ada dalam border radius. Kita pelu memahami detil bagaimana menggunakan property border radius tadi.
Pertama, property border radius mampu digunakan dengan memakai satu persatu property. Umumnya cara ini digunakan waktu kita ingin membuat kotak yang ujungnya tumpul, tetapi tidak semua ujung ingin kita untuk tumpul.
Kedua kita mampu pakai property border radius misalnya kita memakai margin & padding. Kita hanya cukup buat satu baris dengan menggunakan property border radius & mengungkapkan setiap nilai atau nomor ketumpulan menjadi parameter berdasarkan kotak tersebut yang dimulai dari sudut sisi atas kiri, sudut sisi atas kanan, sudut sisi bawah kanan, & terakhir sudut sisi bawah kiri bila nilainya tidak sama. Namun kita mampu menggunakan satu nilai waktu kita ingin membuat ketumpulan yg sama pada setiap ujung sisi kotak.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Penggunaan Property Border Radius</title> <style> div { margin: dua0px auto; } .border1 { width: dua00px; height: dua00px; background-color: turquoise; border-top-left-radius: 5px; border-top-right-radius: 50%; border-bottom-right-radius: 5px; border-bottom-left-radius: 50%; } .borderdua { width: dua00px; height: dua00px; background-color: olive; border-radius: 5px 50% 5px 50%; } </style> </head> <body> <div class="border1"></div> <div class="borderdua"></div> </body> </html>
Border radius menjadi salah satu property CSS3 yg digunakan buat memberikan style dalam page HTML agar semakin menarik. Menurut saya sangat keren ketika kita mengkombinasi penggunaan border radius dengan memakai property CSS background image buat membuat sebuah dekorasi halaman website supaya semakin manis. Sebagai contoh waktu kita ingin menciptakan sebuah frame foto, kita sanggup memanfaatkan border radius ini pada dalam file css. Bakcground image dalam file css akan secara otomatis terbungkus di dalam border yg kita buat. Buat lebih jelas silakan lihat contoh dibawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border Radius Untuk Image</title> <style> div { margin: dua0px auto; } .border1 { width: 500px; height: 500px; background-color: turquoise; background-image: url(img/baby.png); background-repeat: no-repeat; background-size: cover; border-radius: 0 50% 0 50%; } </style> </head> <body> <div class="border1"></div> </body> </html>
 |
| Frame / Bingkai Foto |
Namun Hati-Hati ketika menggunakan image sebagai bagian dari elemen HTML, maka tidak secara otomatis terbungkus kedalam border yang kita buat. kasus ini sama ketika kita membuat sebuah text pada di dalam border, tidak akan secara otomatis terbungkus kedalam border, karena itu kita mengakali hal tersebut, agar tampak terlihat menarik dan cantik. Lihat contoh sintak dibawah ini:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Border Radius Untuk Image</title> <style> div { margin: dua0px auto 100px; } .border1 { width: 300px; height: 300px; background-color: pink; border-radius: 50% 0 50% 0; } .borderdua { width: 500px; height: 500px; background-color: turquoise; border-radius: 0 50% 0 50%; } </style> </head> <body> <div class="container"> <div class="border1"> <h1>Hello World</h1> </div> <div class="borderdua"> <img src="img/baby.png" alt="baby" title="baby"> </div> </div> </body> </html>
Untuk stylenya kita perlu menambah property untuk memperbaiki tampilan dihalaman browser menjadi berikut:
<style> div { margin: dua0px auto 100px; } .border1 { width: 300px; height: 300px; background-color: pink; border-radius: 50% 0 50% 0; text-align: center; line-height: 300px; } .borderdua { width: 500px; height: 500px; background-color: turquoise; border-radius: 0 50% 0 50%; overflow: hidden; } img { width: 500px; height: 500px; } </style>
Jadi untuk mengatasi text hello world yang keluar kita perlu memberi property css text align dengan nilai center. Dan property css line heigt dengan nilai sama dengan tinggi dari elemen tag <div> yang membungkusnya.
Untuk mengatasi gambar yang tidak terbungkus didalam border kira perlu menambahkan property css overflow dengan nilai hidden untuk menyembunyikan kelebihan yang ada diluar border. Selanjutnya samakan ukuran gambar dengan tag <div> yang membungkusnya baik tinggi dan lebarnya.
Ok sekian buat catatan tentang border radius ini, menjadi bagian menurut CSS3. Untuk teman-sahabat yg butuh ilham menggunakan property CSS3 border radius ini. Silakan dowload contoh souce code border radius dibawah ini:
1
dua
3
4
5
6
7
8
9
10
11
1dua
13
14
15
16
17
18
19
dua0
dua1
duadua
dua3
dua4
dua5
dua6
dua7
dua8
dua9
30
31
3dua
33
34
35
36
37
38
39
40
Belum ada Komentar untuk "Border Radius Pada CSS3"
Posting Komentar