Selasa, 30 Mei 2017

Belajar dan Mengenal Property Border Radius

        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

Admin – Lupa code

Silahkan berkomentar yang baik dan menarik sesuai dengan isi konten.
Komentar yang tidak diperbolehkan :

1. Berbau penghinaan SARA & PXXN
2. Komentar dengan Link hidup ( akan dianggap spam )
3. Komentar tidak nyambung dengan isi postingan
EmoticonEmoticon