Belajar Tentang Property Border Radius Pada CSS3

Posted on
        Hallo apa kabar sahabat lupa code semuanya, berjumpa lagi
bersama saya selaku admin dari blog web desain ini, alhamdulilah kita masih
diberi kesempatan untuk berjumpa pada pembahasan saya yang masih dalam seri
css3. Pada pembahasan materi kemarin kita sudah mulai berkenalan dengan css3
yaitu pada materi
Pengenalan & Belajar CSS3 dimana kita sedikit membahas mengenai css3 yang akan bahas pada
seri css3 ini.
Mengenal Property Border Radius pada css
 
        Pada kesempatan kali ini saya akan membahas mengenai sebuah
property dari css3 yaitu Border-radius, dimana property ini sudah mulai kita
bahas pada materi sebelumnya, namun pada materi kali ini saya akan membahas
secara lebih rinci lagi mengenai bagaimana cara pakai property border radius
pada css3 ini.
    Baiklah kita mulai saja pembahasan nya, disini saya mempunyai
sebuah file html sederhana sebagai contoh untuk kita belajar border radius

 


<html>
<head>
<meta charset="utf-8">
<title>Belajar Border Radius</title>
<style>
div{
width: 300px;
height: 300px;
background-color: salmon;
}
</style>
</head>
<body>
<div></div>
</body>



      Temen – temen ingat yah border radius adalah property css3
yang fungsinya untuk membuat kotak yang kita punya itu ujung-ujungnya menjadi
tumpul, semakin besar border radius yang kita berikan maka ujung dari kotaknya
akan semakin tumpul. Seperti pada contoh file html saya diatas jika kita lihat
hasilnya maka akan menjadi seperti ini
Belajar dan mengenal Border Radius
   Kotak 300 x 300 ujungnya pasti lancip. Kalau kita ingin
ujungnya menjadi tumpul maka kita tinggal pake property nya border radius. Misalkan
saya kasih Border radius: 20px; pada file html diatas maka ujungnya akan
tumpul seperti ini
apa itu Border Radius ? yuk belajar css belajar border radius
    Jadi simpel saja cara bikin sudutnya tumpul itu kita pakai
border radius. Nah hati – hati juga temen-temen jika kita kasih tulisan pada div didalam body maka tulisannya akan keluar, contohnya saya kasih tulisan
seperti ini pada div nya
<div> Web Desain </div>
Mengenal dan belajar border radius
          Karna yang tadinya kotak sekarang kita bikin tumpul begitu
pula jika kita menggunakan elemen yang lain maka dia akan keluar juga. Nanti kita
akan bahas cara mengatasinya belakangan. Sekarang kita bikin tulisan nya
menjadi ditengah dulu. Saya kasih Text-align: Center; lalu supaya
ditengah secara vertikal kita kasih line-height yang besarnya sama
dengan tinggi div nya, jadi saya
kasih line-height: 300px; ini pasti tulisannya akan menjadi ditengah
property border radius pada css
     Ini cara kita ngasih border radius kita bisa kasih border
radius nya cukup besar misalkan saya kasih border radius: 100px; hasilnya akan
menjadi seperti ini
belajar Border Radius untuk pemula
     Nanti dia akan terus menjadi semakin tumpul sampai pada
akhirnya dia akan menjadi sebuah lingkaran. Oke kita coba, misalkan saya kasih
dia Border
radius: 150px;
maka dia akan menjadi sebuah lingkaran yang sempurna
Belajar Border Radius dengan mudah pada css3
       Kalian bisa lihat dia sudah menjadi bulatan yang sempurna,
jadi kalau misalkan saya kasih border yang lebih besar dari 150px seperti ini Border
radius: 200px;
maka dia tidak akan terjadi apa – apa, hasilnya akan
tetap sama karna sudut yang paling tumpul itu akan membentuk sebuah lingkaran
     Jadi ini ada rumusnya, kalau misalkan si border radiusnya
setengah dari tinggi dan lebarnya ( kalau dia kotak ) maka dia sudah pasti
menjadi lingkaran. Nah supaya kalian tidak merubah-rubah border radiusnya maka
kita cukup kasih boder radiusnya Border radius: 50%; `jadi berapapun
widht dan height nya asalkan dia sama, maka akan menjadi sebuah lingkaran.
        Nah bagaimana kalau kotak nya tidak bujur sangkar ? maka dia
akan berubah menjadi elipse yah. Misalkan Tingginya 400px dan lebarnya 200px
maka akan menjadi elipse seperti ini, kalau border radiusnya 50%
Border Radius dari dasar awal pada css
       Selanjutnya kita bisa kasih Border radiusnya itu untuk sisi –
sisi, jadi kalau misalkan saya tulis border radiusnya seperti ini Border
radius: 50%;
ini artinya untuk ke empat sisinya yah, kalau pengen Cuma untuk
satu sisi bagaimana ? nah css3 punya property border radius untuk itu. Misalkan
saya ingin untuk sisi kanan atasnya saja yang dikasih border radius, maka
property yang harus kita tuliskan adalah seperti ini
border-top-right-radius: 50%;
Cara memebuat Border Radius dengan mudah
      Maka hasilnya hanya satu sisi saja. nah bagaimana kalau ingin
dua sisi ? saya ingin border radius untuk sisi kiri bawah, maka kita tambahkan
lagi property seperti ini
border-bottom-left-radius: 50%;
Cara membuat border radius pada css3 dengan mudah
     Jadi seperti itu, keren yah jadi atas kanan, bawah kiri. Jadi
untuk border radius juga kalian bisa tambahkan seperti ini untuk masing –
masing sisinya
Membuat variasi dengan Border Radius pada css3
      Atau kalian juga bisa menggunakan satu property seperti
margin, maka kalian cukup tuliskan property nya berurutan sesuai arah jarum jam
seperti ini,
border-radius: 0 50% 0 50%;
       Maka hasilnya akan tetap sama seperti diatas, jadi kita bisa juga
dengan hanya menuliskan satu property saja yah. Kalau misalkan saya coba ganti
border radius nya menjadi seperti ini border-radius: 0 50% 50% 50%; maka
yang lancipnya hanya atas kiri saja
Membuat elemen keren dengan Border Radius pada css3
          Gimana keren yah, jadi kalian bisa gunakan border radius
untuk ke-empat sisinya atau masing – masing sisinya mau berbeda. 
Selanjutnya kalau misalkan kita kasih background image pada div ini, maka secara otomatis gambar itu
akan berada dibalik border radius nya. Jadi lingkaran diatas sudah otomatis
menjadi sebuah frame foto. Misalnya kaya gini, saya mempunyai sebuah gambar
dengan ukuran 256 x 256 pixsel, dan saya akan simpan untuk dijadikan background
image pada
div diatas. Maka saya
tulis  untuk background image nya seperti
ini
background-image: url(webdesain.jpg);
   Jadi seperti ini seluruh syntaxnya dari awal


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>Belajar Border Radius</title>
 <style>
  div{
   width: 300px;
   height: 300px;
   background-color: salmon;
   background-image: url(webdesain.jpg);
   border-radius: 0 50% 50% 50%;
   text-align: center;
   line-height: 300px;
  }
 </style>
</head>
<body>


 <div>Web Desain</div>


</html>

Cara memasukan gambar dengan Border Radius pada css3
     Nah jadi otomatis gambarnya sudah ada di dalam frame nya,
jadi sudah terbungkus didalam border radiusnya, nah karna gambar diatas
berulang maka kita matikan saja pengulangannya dengan menambahkan property
background-repeat: no-repeat;
  dan supaya gambarnya penuh kita tambahkan lagi
background-size: cover;
Cara memasukan foto ke dalam Border Radius pada css3
  Gimana keren bukan ? jadi silahkan kalian bisa coba – coba bereksperimen
sendiri coba terus belajar dan latih kemampuan kalian agar supaya terbiasa lagi
     Baik jadi itulah penggunaan dari border radius, gampang saja
yah. Mudah – mudahan temen-temen paham yah dengan pembahasan saya, sampai jumpa
di dalam materi selanjutnya jangan sampai ketinggalan materi – materi baru web
desain yah
Saya admin dari web desain undur diri, sekian dan terimakasih

Leave a Reply

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