Photobucket Photobucket Photobucket Photobucket Photobucket

♥♥ Tinggalkan jejak anda..^_^ ♥♥

♥♥ Tutorial : Kesan Khas pada Gambar Apabila Cursor Dilalukan ♥♥


Selalunya gambar2 dalam blog statik je bila cursor dilalukan. Border pulak tajam je kat bucu2 tu. Selalunya kalau kat rumah ada anak2 kecik, ibubapa mesti akan belikan perabot2 yang selamat untuk anak mereka contoh beli meja yang tidak mempunya bucu yang tajam untuk keselamatan anak2 mereka. So kalau nak jaga keselamatan pengunjung2 blog kita semasa berada dikawasan kita ni, jom cuba tukar kesan pada gambar anda bila cursor dilalukan..At least kalau bucu border kat gambar blog kita tu bulat je rasa selamat la sikit..kuikui ^_^

Demo: Gerakkan cursor ke gambar






Step2:

  1. Dashboard > Design > Edit html > tick Expand Widget Templates
  2. (ctrl + F), cari code a img {
  3. Delete code bawah a img { , dan gantikan code dibawah ni

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

Contoh: 
Sebelum 



Selepas

     4. Save dan lihat hasilnya

Bagi yang tidak jumpa kod a img {
copy kod di bawah, dan paste SEBELUM /* Headings atau /* Header
a img {
-webkit-transition-duration:.4s;}
img:hover {filter: alpha(opacity=60);
opacity: .6;
border-radius:20px;
border: 1px #000000;
-webkit-box-shadow: 0px 0px 20px #000000;
-moz-box-shadow: 0px 0px 20px #000000;
}


Anda boleh ubah code warna mengikut citarasa anda..^_^


No comments:

Related Posts Plugin for WordPress, Blogger...