CSS Box Shadow sering digunakan untuk menampilkan bayangan pada elemen level-blok ( seperti div ). Dalam CSS menggunakan properti box-shadow menempel satu atau lebih bayangan yang muncul pada sebuah box. Properti box-shadow dapat diterapkan pada browser Firefox, Chrome, IE, Safari dan Opera. Mari kita lihat contoh di bawah:
.shadow { -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; }
Beberapa istilah properti yang dipakai pada CSS Box Shadow
- Bayangan offset horisontal, untuk offset positif berarti bayangan akan berada di sebelah kanan boxsedangkan untuk offset negatif akan menempatkan bayangan pada sebelah kiri box.
- Bayangan offset vertikal, untuk offset negatif berarti bayangan akan berada di atas box sedangkan offset positif berarti bayangan akan berada di bawah box.
- Radius blur (opsional), jika diatur pada posisi 0 bayangan akan menjadi tajam, pemberian angka yang lebih tinggi, bayangan pada box akan menjadi lebih blur (buram).
- Radius penyebaran (opsional), untuk nilai positif akan menambah ukuran bayangan dan untuk nilai negatif akan mengurangi ukuran. Standar yang digunakan adalah 0 (bayangan adalah ukuran yang sama seperti blur)
- Warna, default warna bayangan box adalah warna hitam, namun bisa diatur dengan warna yang lain.
Bayangan dalam Box
Anda ingin menampilkan bayangan di dalam sebuah box, gunakan properti inset, lihat kode di bawah:
.shadow { -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; }
Penerapan di Internet Explorer
Untuk menampilkan CSS box shadow pada browser Internet Explorer, Anda membutuhkan elemen tambahan untuk menampilkannya.
Kode HTML
<div class="shadow1"> <div class="content"> Box-shadowed element </div> </div>
Kode CSS
.shadow1 { margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; } .shadow1 .content { position: relative; /* Ini melindungi elemen inner agar tidak blur */ padding: 100px; background-color: #DDD; }
Bayangan di Satu-Sisi
Menerapkan radius penyebaran negatif, Anda dapat menekan pada bayangan box dan hanya menekannya salah satu ujung box.
.one-edge-shadow { -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; }
Selamat Mencoba & Semoga Bermanfaat.
Azis Hapidin says
Makasih gan, manfaat menggunakan -webkit- sama -moz- itu apa sih gan? Soalnya dari dulu saya suka langsung aja ditulis. Misalkan: border-radius, box-shadow, dll…
Ahmad Fahrurroji says
Sama-sama gan, sebenarnya untuk -webkit dan -moz itu untuk membedakan pembacaan oleh browsernya disesuaikan dengan versi browser itu sendiri supaya yang ditampilkan sesuai. Jadi, kalau tidak ditambahkan tidak akan muncul, kebanyakan dipakai untuk CSS3.
-webkit-
dipakai pada chrome dan safari-moz-
dipakai pada mozilla firefox