Shadow Effect Pada Image Bila Disentuh

Posted by Mira Rasidi | 23 March 2012 | 2 Comment

Assalamualaikum to olls reader.
Ahak.Mungkin ramai yang dah tahu cara nak buat shadow effect pada image kan?kan?kan?..Err..ada aku kesah korang dah tahu.KuahKuah.
Okelah.Okelah.Bagi yang dah tahu tu good yerk.Huray!...
Actually,cikmeera nak kongsi tuto ni sebab ada demand dari seorang blogger ni.Siapakah dia?Ini dia......Credit untuk En.Syafiq. But,cikmeera stil in confusion dengan demand blogger ni.Kehkeh.Harap-harap inilah tuto yang diminta.^ ^

Okey.Bagi yang nak berminat,Jom follow step.


CARA 1
1.  Dashboard>Design>Edit HTML>tick Expand Widget Templates

2.  Cari kod ini:(Untuk memudahkan pencarian,tekan Ctrl F serentak.Kemudian Copy Paste kod di bawah diruang Find: & tekan Enter)

a img {

3.  Kemudian,Copy kod kat bawah & Paste DI BAWAH/SELEPAS kod yang dicari tadi.

 -webkit-transition-duration:.4s;}

img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

 *Warna Biru:Warna Shadow.Gantikan dengan warna yang korang suka.Nak kod warna?Klik SINI.
 

Sekiranya di bawah kod a img { terdapat kod lebih kurang seperti ini>>>

border-width:0;
}

DELETE jer & Gantikan dengan kod baru di atas.



4.  Preview.Cuba bawa cursor korang sentuh dengan image.Kalau jadi.Save yerk.






CARA 2 
If korang tak jumpa kod a img {,Korang boleh cuba cara kedua ini pulak.


1.  Dashboard>Design>Edit HTML>tick Expand Widget Templates

2.  Cari kod ini:(Untuk memudahkan pencarian,tekan Ctrl F serentak.Kemudian Copy Paste kod di bawah diruang Find: & tekan Enter)

 /* Header

 ATAU

/* Headings

3. Copy kod di bawah & Paste SEBELUM/DI ATAS kod yang di cari tadi.

 a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #FF66CC;
-webkit-box-shadow: 0px 0px 20px #FF66CC;
-moz-box-shadow: 0px 0px 20px #FF66CC;
}

*Warna Biru:Warna Shadow.Gantikan dengan warna yang korang suka.Nak kod warna?Klik SINI.


4.  Preview.Kalau jadi,Save jer.



P/s:SELAMAT MENCUBA!Semoga Berjaya ye kamu...Jangan lupa tinggal jejak untuk cikmeera yerk.