Wednesday 18 December 2013

Tutorial : Round Hover With Shadow


assalamualaikum. hari ni nak buat tuto. hehe. atas permintaan kawan. act, kalau nak tgk round hover ni boleh lah hulur cursor dkt button follow. haaa, melengkung kan? itulah round hover. tapi kali ni ada shadow. so, follow the steps! ( tapi yg ni berdasarkan template baharu)

1. dasboard - template - edit html

2. then tekan ctrl + f search kod bawah ni :
/* Header
3. dah jumpa? then paste kod bawah ni ATAS kod /*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;
}

4. tukar kod colour yg yasmin highlight tu eh. kalau tk nak shadow boleh letak kod putih. tekan utk kod colour .

5. preview sebelum save takut tak jadi. dh jadi? jgn lupa comment! bye :)
♥ Thanks For Reading This Entry ♥

0 panda(s):

Post a Comment

Do Leave Your Comment On My Blog .

All Copyright © Are Belongs To Nur Nadhirah Yasmin