Drop Shadow with CSS3

Support:

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

Code:

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

Keterangan 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.

Sample:

-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)

Refferensi