tutorial image animation hover
Khamis, Jun 02, 2011 | Khamis, Jun 02, 2011 | 0 comments
oke..arini nak uat tutorial yang dipesan dari formspring..ok..lor nak tanye at formspring pasti kan sertakan url.biar senang dijejak..oke..nak uat tutorial sal bile mouse sentuh gambar..die akan ade garisan melengkung..lor still xpaham.tengok at belog teha.halakan mouse at mane2 gambar.ade garisan melengkung wane pinkkan.meh cini teha ajar.sediakan pen degan kertas ye..mule2 g dashboard>design>edit html
tick expand widgets yunk ade at situ.wajib tick.
lepas tu carik kod
/* Headertekan f3 tok senang carik
hah da jumpekan.amek kod at bawah nie ye.tkan ctrl +c serentak ye tok copy
da copy?pastekan kod tu at atas kod /* Header tadi..
/*------ 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 #F660AB; -moz-box-shadow: 0px 0px 20px #F660AB; -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 #F660AB; 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 #F660AB;
padding: 0px;
}
yung dihighlightkan tu boley tukar.and cari at sini
ok.siap.preview dulu.lor da oke and puas hati save..gud luck