round hover with shadow

Saturday, October 27, 2012


Annyeong..


Assalamualaikum semua,ape khabar,huh tadi julia kehujanan sewaktu pulang dari rumah kawan,oklah hari ini julia nak ajar korang semua camner nak buat round hover shadow,korang tau ape itu? ianya macam effect apabila mouse menyentuh link ia akan jadi hover..
Okeylah,tanpa membuang mase lagi julia akan ajar korang semua k?

1.log in-->dashboard-->edit html-->Tick expand widget


2.tekan CTRL serentak dengan F untuk search kod dibawah ini:

/* header

3.dah jumpe?salin kod dibawah ini dan pastekan kod ini diATAS kod yg korang cari tadi tu.


 /*------ IMAGE ANIMATION------*/img {filter:alpha(opacity=100);-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #FF3366; -moz-box-shadow: 0px 0px 20px #FF3366; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#FF3366; border-radius: 50px; -moz-border-radius: 50px;}-moz-opacity:1.0;opacity:1.0;}img:hover {filter:alpha(opacity=80);-moz-opacity:0.80;opacity:.80;}u {text-decoration:underline;border-bottom: 2px dotted #ff0080;padding: 0px;}

4.Yg kod dihighlight warna pink tu korang boleh tukar dengan warna lain-ambil DISINI.


5.dah siap-->apa lagi SAVE.

Okeylah,kalau dah faham harap good luck nak buatnyer-jumpe lagi kalau ade lagi tutorial yg julia nak kasi lagi.

BYE!!