Tutorial Belajar CSS3: Cara Membuat Efek Bayangan (Box Shadow)

Jika pada tutorial belajar CSS3: Cara Membuat Efek Teks Berbayang kita membuat bayangan (shadow) pada tulisan teks, kali ini saya akan membahas cara membuat efek bayangan pada 'bingkai' element HTML. Property yang akan kita gunakan adalah box-shadow.


Property CSS3 box-shadow untuk Membuat Efek Bayangan

Untuk membuat efek bayangan pada sebuah element HTML (Box Model), kita bisa menggunakan property CSS3 box-shadow.

Property box-shadow bisa diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan ditampilkan. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
 
     box-shadow: 7px 7px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

Cara membuat efek bayangan dengan CSS

Property box-shadow: 7px 7px akan menghasilkan efek bayangan di posisi 7 pixel ke kanan dan 7 pixel kebawah. Bagaimana jika saya ingin kearah kiri dan atas? Kita bisa menggunakan angka negatif:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
 
     box-shadow: -7px -7px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

Mengatur penempatan efek bayangan CSS3

Kali ini efek bayangan akan tampil dengan jarak 7 pixel ke kiri dan 7 pixel ke atas.


Mengatur Efek Blur Bayangan

Selain posisi bayangan, kita juga bisa mengatur seberapa 'kabur' bayangan yang ditampilkan. Dalam istilah design, ini dikenal dengan istilah blur. Semakin tinggi nilai blur, semakin samar-samar bayangan yang terjadi. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
 
     box-shadow: 7px 7px 10px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

Menambahkan nilai blur kepada gambar bayangan

Property box-shadow: 7px 7px 10px berarti saya ingin menampilkan bayangan di 7 pixel ke kanan, 7 pixel ke bawah, dengan blur sebesar 10 pixel.


Menentukan Besar Bayangan

Nilai berikutnya yang bisa diinput ke dalam property box-shadow adalah Spread. Spread menentukan seberapa besar bayangan yang dibentuk. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
 
     box-shadow: 7px 7px 10px 15px;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

Memperbesar efek bayangan CSS dengan nilai spread

Sekarang efek bayangan yang dihasilkan terlihat lebih besar dari sebelumnya. Ini berasal dari nilai 15 pixel untuk spread.


Mengganti Warna Bayangan

Dalam contoh sebelumnya, bayangan tampil dengan warna hitam, dimana ini adalah warna default bawaan web browser. Kita bisa menambahkan nilai warna ke dalam property box-shadow untuk mengganti warna bayangan ini. Berikut contohnya:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 150px;
     border: 2px solid black;
     background-color: yellow;
     margin: 30px;
 
     box-shadow: 7px 7px 10px 2px green;
   }
</style>
</head>
<body>
<div></div>
</body>
</html>

Mengubah warna bayangan dengan CSS3 Box Shadow

Property box-shadow: 7px 7px 10px 2px green berarti: buat bayangan di posisi 7 pixel ke kanan, 7 pixel kebawah, blur sebesar 10 pixel, spread 2 pixel, dan berwarna hijau (green).


Menambahkan Efek Bayangan ke Gambar (img)

Efek bayangan dari property box-shadow yang kita pelajari disini sangat menarik untuk digunakan dalam berbagai element HTML, terutama ke dalam gambar.

Dengan menambahkan property box-shadow: 10px 10px 10px ke dalam bingkai gambar yang pernah kita buat di dalam Tutorial Belajar CSS: Membuat Gallery Gambar dengan HTML dan CSS, efek yang dihasilkan terlihat professional. Berikut hasilnya:

Menambahkan efek bayangan (box shadow) ke gallery gambar

Berikut kode yang saya gunakan:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Belajar CSS</title>
  <style>
    body {
      width: 736px;
      margin: 10px auto;
      border: 2px solid black;
    }
    img {
      border: 4px solid #575D63;
      margin: 20px;
      padding: 10px;
      width: 300px;
      height: 200px;
      box-shadow: 10px 10px 10px;
    }
  </style>
</head>
<body>
  <img class="gambar1" src="autumn_lake.jpg"><img class="gambar2" src="beach.jpg">
  <img class="gambar3" src="berry.jpg"><img class="gambar4" src="sakura.jpg">
</html>

Untuk mendapatkan hasil yang sama, anda tinggal mengganti nama file gambar.

Tertarik mengetahui efek property CSS3 lainnya? saya membahasnya dengan lebih detail di eBook CSS Uncover Duniailkom :)


eBook CSS Uncover Duniailkom
Jika anda ingin belajar cara mendesain web, CSS wajib dikuasai. Duniailkom telah menyusun eBook CSS Uncover yang membahas CSS dengan lebih detail dan lebih lengkap, mulai dari dasar hingga fitur terbaru CSS3 seperti animasi dan web responsive. Penjelasan lebih lanjut bisa ke: eBook CSS Uncover Duniailkom.

15 Comments

  1. Lius Luaha
    03 Oct 16
  2. WIndi
    16 Oct 16
  3. Bima710
    23 Oct 16
    • Andre
      24 Oct 16
  4. polok asu
    25 May 17
    • Andre
      27 May 17
  5. Dian Fi
    30 Jan 18
  6. Nikko
    24 Apr 19
    • Andre
      25 Apr 19
  7. Ikhsan
    28 Aug 20
  8. Tri Winoto
    21 Jan 21
    • Andre
      22 Jan 21

Add Comment

Leave a Reply to Lius Luaha Cancel reply