Memahami box-shadow css3

Oke, mudah-mudahan sudah mengerti dengan judulnya saja.

Properti box-shadow pada css3 digunakan untuk memberikan bayangan pada background. (Yaiyalah secara artinya shadow kan bayangan :P).

tag {
    box-shadow: 5px 5px 10px #000000;
    -moz-box-shadow: 5px 5px 10px #000000;
    -webkit-box-shadow: 5px 5px 10px #000000;
}

Nah, itu dia kode css untuk membuat bayangan pada background. Eits, tunggu dulu.
box-shadow adalah properti dari css3. 5px 5px 10px #000000
5px yg pertama dan yg kedua adalah untuk mengatur posisi dari bayangan, horisontal dan vertikal.
sedangkan 10px untuk mengatur tingkat blur dari bayangan. #000000 digunakan untuk menentukan warna dari bayangan.

Nah kalau bayangan berada didalam bagaimana? Tenang, tinggal memakai properti inset. Jadi, kode css-nya akan menjadi seperti ini:

tag {
    box-shadow: inset 5px 5px 10px #000000;
}

Nah, bagaimana?
Loh kok cuma 3 baris? Kan yg pertama ada 5 baris? Yup, begitulah. Ternyata untuk firefox 13+ dan chrome 19+ sudah bisa menampilkan box-shadow hanya dengan satu properti saja. Entah untuk safari dan opera (apalagi IE) karena aku sendiri gk pernah menggunakannya. :P