Hover for Header (berpusing, bergerak ke kiri/kanan, ke bawah dn sebagainya)

Wednesday, October 5,20:32 | 2 notes
penat nye...baru je lepas raikan aktiviti kat kolej..
ok,tanpa buang masa,jom kita tenguk tutorial untuk header..nk buat dia gerak-gerak ke..pusing-pusing ke atau ke bawah...
korang boleh lah pilih salah satu hover untuk header korang. *pilih satu je.
tutorial nie eyra belajar dari Lettha , Una , dan Zira ade yg Eyra buat sendiri..hahaha...cuma tambah je code yg boleh di letak kepada basic code..
dont forget credit untuk mereka kalau guna tutorial nie...

1. Search kod :

         #header { 

*lepas tuh copy laa mane-mane code yg eyra bg dibawah nie :

Header ke Kiri atau ke Kanan :

2. Then, copypaste code di bawah nie selepas tande } pada code yg korang search tadi.. :

#header:hover {
padding-left: 50px;
-webkit-transition-duration: 0.5s;
}

Header ke Kiri atau Kanan,then terus hilang:

3: Cari code yg sama macam code pada step 1...then copy paste code di bawah nie selepas code yg di cari tadi :

#header:hover{
padding-left: 50px;
filter: alpha(opacity=0);
opacity: .0;
-webkit-transition-duration: 2s;
}

* take note for tutorial header bergerak ke tepi atau tepi dan hilang :
BIRU - tukar lah right ke,left ke
MERAH - tukarlah sejauh berapa korang nak



Header Rotate / Berpusing :

4. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi :

#header:hover {
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-webkit-transition-duration: 2s;
}

Header Rotate / Berpusing,then hilang :

5. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi : *my own made..

#header:hover {
filter: alpha(opacity=0);
opacity: .0;
-webkit-transition: 2s;
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
}

*take note untuk rotate header atau rotate then hilang :
MERAH - tukar lah jumlah degree yg korang nk..kalau boleh,jgnlah 360...pening orang lah...



Header Turun ke Bawah :

6. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi : 

#header:hover {
padding-top:40px;
-webkit-transition-duration: 2s;
}


Header Turun ke Bawah dan Hilang :

7. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi :  *my own made

#header:hover{
filter: alpha(opacity=0);
opacity: .0;
padding-top:40px;
-webkit-transition-duration: 2s;
}

*take note untuk header turun ke bawah atau turun ke bawah dan hilang:
MERAH - tukarlah berapa banyak ke bawah korang nak letak...


Header Bertukar :

8. Mula-mula korang kenelah buat 2 header yg berlainan...

9. Cari code yg sama mcm step 1. Then copy paste code dibawah nie selepas code yg dicari tadi : 

#header:hover {
background: url(URL HEADER IMAGE)
}

*take note for header berkelip:
BIRU - image yg korang nak ye..


p/s : bagi pengguna template biase..kalau tak jumpa kod yg patut korang cari tuh..korang search laa code bawah nie :

/* Header

*tak faham,boleh tanya ye ^_^

2 ringankan tangan untuk menaip:

MyDoLce.aMyra said...

eyra.. npe yew saya cri #header { xkuar pon?

eyra syahira said...

@MyDoLce.aMyra brgantung juga jenis template..cuba search kod nie pulak --> /* Header