Cara Membuat Efek Shadow (Bayangan) Pada Gambar

Kali ini Saya akan membahas cara membuat efek shadow (bayangan) pada gambar.

Satu dari sekian banyak efek yang diciptakan oleh css3 yaitu dapat digunakan untuk membuat efek bayangan di sekitar gambar posting. Dalam hal ini kita akan menggunakan kode box-shadow.

Cara menerapakannya pada gambar posting agar menghasilkan Efek bayang :

• Login ke blogger.com, jika sudah,
• Cari kode .post-body img { agar mudah mencari tekan f3
• Letakkan script di bawah ini setelah .post-body img {

-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;

• Simpan dan lihat hasilnya

Efek bayang ini akan lebih hidup jika diterapkan pada gambar dalam keadaan mouse over (mouse menyentuh gambar). Jadi dalam keadaan normal tidak terlihat efek bayangan sedangkan pada saat mouse didekatkan pada gambar baru kelihatan efek bayangnya.

Bila ingin membuat efek bayang pada gambar ketika mouse hover saja, caranya :

• Login ke blogger.com, jika sudah,
• Pilih Template → Edit HTML → Expand Template Widget
• Cari kode ]]></b:skin> agar mudah mencari tekan f3
• Letakkan script di bawah ini, di atas ]]></b:skin>

.post-body img:hover{
-webkit-box-shadow:4px 2px 7px #000;
-moz-box-shadow: 4px 2px 7px #000;
box-shadow : 4px 2px 7px #000;} 4. terakhir save

Demonya bisa dilihat pada blog ini, sentuh saja gambar yang ada pada postingan blog ini.

Selamat Mencoba !

Sumber