13 Oktober 2011

Cara Buat Hover Round With Shadow


Hover round with shadow tue sebenarnya mcm ni,bila kita sentuh image dgn auto nya image akan berubah menjadi shadow berserta dengan round skali..Nak tau lebih detail jom cuba tutorial ni caranya :

1. Go to Dashboard > Design > Edit HTML > Tick Expand Widget
2. Tekan F3 @ Ctrl F cari kod ini :  /* Header
3. Copy kod dibawah ini, 
    kemudian paste di atas kod yg dicari tadi (/* Header)
/*------ 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;
* Yang dihighlight kan tu korang boleh tukar dengan warna kesukaan korang keh.
4. Preview dulu klu rasa dah ok tue boleh lah SAVE trus.