Sunday, 14 August 2011

Tutorials # 1:Image Animation Hover

assalamualaikum smua !! harini rse rajin pulak nak buat tuto...harini rse nak buat tuto Image Animation Hover ..
Image Animation Hover tu macam ble kte ltakan cursor kte kat pic ..pic tu akan jdi melengkung nak tau cbe ltakan cursor kat gambar blog nie ? mlengkung kan ? okay jom Tieya ajarkan ...tak tau cube grakkan cursor korang kat pic nie..

nampak tak ? dyer jdi mlengkungkn ?? tu lah image animation hover..

1. Dashboard > Design > Edit HTML

2. cari code nih :-
 
    /* Header 


3. Da jumpa ? Copy code nie  plak and ltak kat bawah code yg nombor 1 tdi ..


    /*------ 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 #000000; -moz-box-shadow: 0px 0px 20px #000000; -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#000000; 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 code warna merah tu korang tukarkan dengan clour code yg korang ske yer ... tkan sini


Slamat mncube !!

No comments:

Post a Comment