Arsip Ku: HTML & CSS - Membuat Sudut Melengkung Dengan CSS3

Pada CSS3 kita sudah bisa membuat sudut melengkung pada sebuah element HTML, sehingga website yang kita buat pun tampilannya menjadi lebih interaktif. Untuk membuat sudut element menjadi melengkung dengan CSS3 ini, kita bisa menggunakan perintah "border-radius". Perintah "border-radius" ini merupakan perintah baru dari CSS3. Pada zaman dulu para web developer hanya menggunakan table untuk membuat tampilan website.

Langsung saja kita praktek untuk membuat sudut melengkung pada halaman website dengan CSS3. Kita akan membuat 2 file yaitu "sudut-melengkung.html" dan "sudut-melengkung.css".

Kode HTML : sudut-melengkung.html

it916@planning-ho-pc:~$ sudo pico /var/www/html/lth4-css3/sudut-melengkung.html

<!DOCTYPE html>
<html>
 <head>
  <title>Membuat sudut melengkung dengan css3 | havizul.blogspot.com</title>
  <link rel="stylesheet" type="text/css" href="sudut-melengkung.css">
 </head>

 <body>
  <h1>Membuat Sudut Melengkung Dengan CSS3 | havizul.blogspot.com</h1>
  
  <div class="ketengah">
   <div class="kotak kotak1">kotak 1</div>
   <div class="kotak kotak2">kotak 2</div>
   <div class="kotak kotak3">kotak 3</div>
   <div class="kotak kotak4">kotak 4</div>
   <div class="kotak kotak5">kotak 5</div>
   <div class="kotak kotak6">kotak 6</div>
   <div class="kotak kotak7">kotak 7</div>
   <div class="kotak kotak8">kotak 8</div>
  </div>
 </body>
</html>

Kode CSS : sudut-melengkung.css

it916@planning-ho-pc:~$ sudo pico /var/www/html/lth4-css3/sudut-melengkung.css

body {
  background: #A8AAB3;
  font-family: roboto;
  text-align: center;
}

h1 {
  color: #fff;
}

.ketengah {
  margin: 10px auto;
  width: 1150px;
}

.kotak {
  background: #fcfcfc;
  padding: 20px;
  width: 200px;
  float: left;
  margin: 20px;
  height: 200px;
}

.kotak1 {
  border-radius: 10px 10px 10px 10px;
}

.kotak2 {
  border-radius: 40px 20px 60px 90px;
}

.kotak3 {
  border-radius: 2px 140px 20px 60px;
}

.kotak3 {
  border-radius: 20px 10px 80px 10px;
}

.kotak4 {
  border-radius: 0px 50px 0px 50px;
}

.kotak5 {
  border-radius: 0px 0px 0px 0px;
}

.kotak6 {
  border-radius: 100%;
}

.kotak7 {
  border-radius: 40px 10px;
}

.kotak8 {
  border-radius: 10px 10px 50% 50%;
}

Setelah selesai mengetik kode program, simpan dan lihat hasilnya melalui web browser. Hasilnya akan tampak seperti berikut ini.

Rumus penulisan perintah "border-radius" ini adalah sebagai berikut.

border-radius : nilai_sudut_kiri_atas nilai_sudut_kanan_atas nilai_sudut_kanan_bawah nilai_sudut_kiri_bawah;

Seperti penulisan nilai untuk element pada kotak 2, maka nilai untuk sudut kiri atas = 40px, sudut kanan atas = 20px, sudut kanan bawah = 60px, dan sudut kiri bawah = 90px. Silahkan lihat hasilnya pada gambar diatas.

.kotak2 {
  border-radius: 40px 20px 60px 90px;
}

Dalam memberikan nilai pada perintah "border-radius", ada beberapa cara antara lain :

Menggunakan Pixel (px)

.kotak1 {
  border-radius: 10px 10px 10px 10px;
}

.kotak2 {
  border-radius: 40px 20px 60px 90px;
}

Menggunakan Pixel (px) pada ke empat sudut nya sebanyak 2x

.kotak3 {
  border-radius: 2px 140px 20px 60px;
}

.kotak3 {
  border-radius: 20px 10px 80px 10px;
}

Menggunakan Persen (%)

.kotak6 {
  border-radius: 100%;
}

Hanya memberikan 2 nilai

.kotak7 {
  border-radius: 40px 10px;
}

Menggunakan Pixel (px) dan Persen (%)

.kotak8 {
  border-radius: 10px 10px 50% 50%;
}

Memberi nilai bisa dalam bentuk Persen (%) dan Pixel (px) atau kombinasi keduanya. Jika nilai yang diberikan hanya dua value, maka nilai yang pertama dibaca nilai atas dan nilai kedua dibaca nilai bawah. Jika nilai yang diberikan hanya satu buah nilai, maka nilai ini akan digunakan untuk tiap sudut element.

Note :

Untuk menjalankan CSS3 ini, software apakah yang saya gunakan ? Saya menggunakan Sistem Operasi Ubuntu 16.04 dengan software LAMP Server yang telah tersedia di server repository nya. Untuk menginstall LAMP Server cukup ketikkan pada terminal perintah "sudo apt-get install lamp-server^".

Demikian tutorial ini, selamat mencoba.

Sumber :
http://www.malasngoding.com/tutorial-css3-part-2-membuat-sudut-melengkung-dengan-css3/

Arsip Ku

Laman

Jumat, 07 Oktober 2016

HTML & CSS - Membuat Sudut Melengkung Dengan CSS3

1 komentar: