Sunday, 29 January 2012

TUTORIAL : HOVER GAMBAR MELENGKUNG BILA CURSOR MENYENTUH


adeh panjang benor dah tajuk tu hah.. ok.. harini cik N nak tunjuk satu lagi tutorial yang cik N sendiri apply kat blog.. yelah.. kalau tak apply macamna nak bagi contoh.. erk~!

macamana nak buat gambar yang korang post dalam entry atau gambar gambar kat side bar ke.. mana mana lah gambar yang wujud dalam blog korang tu jadi melengkung comel macam gambar kat bawah ni.. 
cer try ^_^ .. comey tak?? tak?? *sedehnye~!!*

contohnye: 


ni munyet cik N.. nak jugak?? ikot tuto cik N bawah ni.. :)



1) korang just pergi kat dashboard -->  design --> edit HTML --> tick  ..

2) nak edit dah kan? tekan CTRL + F serentak .. dan cari kod ni.. 




/* Header



3) copy pulak kod bawah ni dan masukkan kat atas kod yang korang cari tadi (2) boleh?


/*------ 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) yang kod warna oren tu.. korang boleh tukar warna nye.. ikot warna yang korang suka.. (KOD WARNA)

5) preview dulu dan try bawak cursor korang sentuh mana mana gambar.. jadi tak?? ^_^ kalau jadi bagitahulah ye.. kalau tak jadi pun bagi tahu tau.. daa~!!

p/s: cik N tak apply kat blog dah sebab blog cik N tak sesuai guna hover kot.. nanti gambar header jadi blur :)

3 comments:

Liyana yan said...

sye ikut tuto nie... :)

Iqmal Hakimi said...

cantiklah header tuh n wajah yg cutie..

nur hayati said...

thanks ye akak . kita follow tuto ni :)

Related Posts Plugin for WordPress, Blogger...