Membuat Efek Bayangan Pada Gambar

Berbagai efek dapat tercipta berkat kode css3, seperti tutorial yang akan saya informasikan kepada anda khususnya bagi pemula.

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 :
1. login blogger lalu menuju edit html
2. cari kode .post-body img {
3. masukkan kode ini setelah kurung kurawal

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

4. jangan lupa save

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

Bila ingin membuat efek bayang pada gambar ketika mouse hover saja, caranya :
1.    login blogger lalu menuju edit html
2.    cari kode ]]></b:skin>
3.    masukkan kode 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

Untuk melihat contoh demonya silahkan klik disini

Selamat menikmati gambar dengan efek bayang.