28 June 2011

Tutorial : Round Hover + Shadow

Cuba lihat blog yana
bila menyentuh gambar atau header
automatik akan keluar gamabar jadi bulat disertakan
dengan shadownya sekali

ok macamana caranya

ikut step yana ni

1st buka Dashboard > Design > Edit HTML > click Expand Widget 

pastu tekan CTRL + F dan cari kod ni
/* Header
next, copy kod di bawah ini 
/*------ 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;
}
dan paste pada di atas kod yang kamu cari tadi 


tukar kod colour biru kepada colour yang kamu suka 


dah siap boleh save dan view blog korang untuk tengok hasilnya


ok done

3 comments:

Power Rangers Lawan Atromen.. Jangan Lupa Komen ◕‿◕