Drop Shadow dengan CSS3 Pada Semua Browser

CSS3 adalah versi terbaru dari CSS (Cascading Style Sheet). CSS digunakan untuk mengatur tampilan visual sebuah website. Pada CSS3 ada sebuah property baru yang berfungsi untuk memberikan efek drop shadow yaitu box-shadow. Dulu pada CSS level 2, untuk mendapatkan efek drop shadow kita harus menggunakan gambar. Tapi sekarang pada CSS3, itu dapat dilakukan tanpa menggunakan gambar.

Web Browser Support

CSS3 memang belum menjadi standar baku. Walaupun begitu, browser modern sudah banyak yang mendukung CSS3 diantaranya adalah,

• Firefox 3.5+
• safari 3+
• Google Chrome
• Opera 10.50
• Internet Explorer 6+

How To

Berikut adalah format penulisan property box-shadow

box-shadow: 1px 1px 5px #000000;

Property box-shadow memiliki 4 value

1. vertical-offset : Nilai posisi bayangan secara horizontal, nilai negatif akan membuat posisi bayangan ada di sebelah kiri sebaliknya nilai positif membuat posisi bayangan berada di sebelah kanan.
2. Horizontal-offest : Posisi bayangan secara vertical, nilai positif membuat bayangan berada di atas, nilai negatif membuat bayangan berada di bawah.
3. Blur radius : Nilai 0 membuat bayangan terlihat jelas, semakin tinggi nilai yang diberikan, bayangan akan semakin terlihat blur.
4. Color : Warna bayangan.

Catatan : Setiap browser memiliki property yang berbeda untuk box-shadow, setiap browser memiliki prefix masing - masing,

• -moz-box-shadow ,property ini untuk mozilla firefox
• -webkit-box-shadow, property ini untuk browser berbasis webkit engine seperti safari dan google chrome
• Untuk Opera 10.50 tidak menggunakan prefix cukup box-shadow saja

How about IE ?

Untuk Internet Explorer, ada property khusus untuk browser yang satu ini

filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=1px, OffY=1px, Color='#ffffff'); /* IE6, IE7*/

-ms-filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=4px, OffY=3px, Color='#ffffff');/* IE8 */

Internet Explorer tidak dapat menampilkan efek blur pada box-shadow.

Live Demo

Code css untuk kotak di atas

 -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
-webkit-box-shadow:0 0 5px rgba(0,0,0,0.5); 
box-shadow:0 0 5px rgba(0,0,0,0.5)