Tutorial ; image opacity effect

heyyo , hari nie afiq nak buat tuto , wee . rajin nye dye ;)

oke , fasal tajuk tu afiq maen hentam je .

tapi effect dye akan jadi mcm tu lah . from fade to clear .

tuto kali nie sis hajar yg request ;)

oke , let's start the lesson , weeee .

tuto kali nie , senang gilaaa . try lah ;)

1 . firstly , copy SEMUA code yg ade kat bawah nih ;

<style>
/* ----- Image opacity effect 2 ----- */
.post a img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
.post a:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}
</style>

2 . lepas dah copy paste kan aje dekat HTML/javascript

contoh ; dashboard > design > page elements > add a gadget > pilih HTML/ javaScript
pastu paste kan aje dekat ruangan yang di sedia kan *macam biase lah kan ? hehe


3 . oke , DONE ! pastu tgok effect dye . heee




ADVANCE

okey , dah buat tuto yg kat atas tuh ? good , okey , nie afiq ade bagi

advance lagi , huhu . keh , kalau nak bagi dye melengkung

yang macam afiq punye neh , ikut lagi satu tuto yang kat bawah nie , ;)

1 . first of all , kene carik code nie ; a img {

2 . oke , dah ? good . lepas tuh copy keseluruhan code yang ade dekat bawah nih ;

-webkit-transition-duration:.4s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 40px #bebaba; -moz-box-shadow: 0px 0px 40px #bebaba; -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: 0px dashed #000000; border-radius: 40px; -moz-border-radius: 40px;}

STUDY !


BIRU ; kelebaran shadow *lagi besar nombor tuh , lagi lebar shadow dye
PURPLE ; warne shadow tuh boleh refer kat sini
LIME ; kelengkungan lengkung border yang akan melengkung *ayat macam keling jeh ;)

AQUA ; warne border gambar
ORANGE ; ketebalan border gambar


3 . okay , lepas tuh , preview keyh ? kalau takde pape , SAVE terus , weeeeee ;)

fiuhh , siap jugak , ;) kejap , esok tuition SABTU ! grr , mane seluar slack aku nih , jenuh nak carik , hehe