Membuat efek Box Shadow di Blog

Sebenarnya saya sudah pernah posting tentang hal ini, judulnya Memberi Efek Shadow Pada Gambar di Blog . Tidak ada bedanya dengan posting saya kali ini. Bedanya hanya di posting saya kali in akan membahasnya lebih detail tentang efek ini. Siapkan teh manis atau jika tidak suka kopi, susu juga boleh hehehe. Agar bisa santai belajarnya.. oke langsung saja.
Jika di post saya terdahulu kodenya berbentuk -moz-box-shadow: seperti itu iyakan? itu hanya berfungsi untuk mozilla/firefox saja. Nah untuk google chrome menggunakan -webkit-box-shadow: Gunakan kedua kode itu jika ingin menampilkan di kedua browser tersebut. Dan alangkah lebih baiknya jika anda menambahkan kode box-shadow: juga. Nah barulah masukan ke3 kode di atas kedalam style/css templates blog anda. Seperti ini

Contoh {

box-shadow:-5px -5px 10px #818181;

-moz-box-shadow:-5px -5px 10px #818181;

-webkit-box-shadow:-5px -5px 10px #818181;

}

Dan hasilnya akan seperti ini. Jeng-jeng.

Oops (18+ bro... wakaka)

Sekarang coba kita artikan kodenya satu per satu. Minum dulu tadi yang udah siapin hehe.

box-shadow:-5px(horizontal) -5px(vertikal) 10px(blur) #818181(color);

1. Horizontal berfungsi untuk membuat bayangan di bagian kanan/kiri box. Jika bernilai negatif (-5px)akan memberi bayangan di bagian kiri box dan jika bernilai postif (5px) akan memberi bayangan pada bagian kanan box 
2. Vertikal berfungsi untuk memberi bayangan di bagian atas.bawah box. Nilai postif (5px) untuk bagian bawah box dan nilai negatif (-5px) untuk bagian atas box
3. Blur untuk memberi tingkat blur bayangan. Nilai 0 berarti tidak memiliki blur. Nilai positif untuk menambah bayangan dan nilai negatif untuk menyusutkan bayangan
4. Color adalah untuk warna bayangan box anda.

Sudah saya bahas secara detail tuh. Terima kasih untuk telah membaca posting saya jangan lupa commentnya ya oke. TERIMA KASIH