TipsTrik79: Program CSS | Cara Membuat efek bayangan/Box Shadow

Pembahasan kali ini adalah bagaimana membuat efek bayangan atau box shadow. Property box-shadow bisa diisi dengan beragam nilai, tapi setidaknya perlu 2 nilai utama yang menentukan seberapa jauh jarak bayangan ditampilkan. Untuk lebih jelasnya, perhatikan contoh-contoh berikut :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   div {
     width: 150px;
     height: 200px;
     border: 2px solid black;
     background-color:#99FFFF;
     margin: 20px;
     box-shadow: 6px 6px;
   }
</style>

</head>
<body>
<div align="center"></div>
</body>
</html>

box-shadow: 6px; 6px; akan menghasilkan bayangan 6 pixel ke kanan dan 6 pixel ke bawah seperti gambar berikut ini :

Nah. bagai mana jika saya menginginkan hal yang sebaliknya yaitu bayangan mengarah ke atas dan ke kiri? dengan cara menambahkan tanda minus.


box-shadow: -6px -6px;

maka hasilnya akan menjadi seperti berikut ini :

Selanjutnya adalah cara menambahkan efek blur pada bayangan, kita juga busa mengatur seberapa kabur efek bayangan yang akan kita buat, semakin tinggi nilai blur yang dibuat, maka semakin kabur bayangan yang dihasilkan.


box-shadow: -6px -6px 10px;

Maka hasilnya akan seperti berikut ini :

Selanjutnya adalah mengatur seberapa besar bayangan yang dihasilkan yaitu Spread.


box-shadow: -6px -6px 10px 12px;;

Agar sedikit lebih rapih, kurangi jarak tapilan bayangan seperti berikut :


box-shadow: -1px -1px 10px 12px;;

Selanjutnya adalah menambahkan Efek warna pada bayangan, berikut adalah contoh nya.


box-shadow: -1px -1px 10px 12px red;

Dan yang terakhir adalah, bagaimana cara nemahbahkan efek bayangan pada gambar/image. untuk itu perhatikan langkah dibawah ini :


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
   img {
     border: 2px solid black;
     background-color:#99FFFF;
     margin: 20px;
     box-shadow: -1px -1px 10px 12px red;
   }
</style>
</head>
<body>
<img src="Koala.jpg" width="500px" height="400px"/>
</body>
</html>

Maka hasilnya akan menjadi seprti berikut ini :