Tutorial : Header menyenget bila disentuh

Click here first !

Nampak tak gambar tu? Bila cursor sentuh header, dia terus menyenget.

1. CTRL + F Serentak tau tekan. cari perkataan di bawah.

 /* Content

Kalau tak jumpa, cari yang bawah pula.

/* Header

Kalau dua-dua ada. Better pilih header. Takut bila kauorang pilih content, hilang semua benda.

Next Step. Copy code di bawah. Pastekan di bawah  /* Content atau /* Header

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

Meh sini, saya tunjukkan. Contoh content.

 /* Content
    ----------------------------------------------- */
#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg);

Contoh header.

/* Header
----------------------------------------------- */
#header:hover{
-webkit-transition-duration: 2s;
-moz-transform: rotate(7deg);
-webkit-transform: rotate(7deg); 

Haaa, sekarang, header boleh bergerak ke sana ke sini. Nah saya bagi codenya.

1. Bergerak ke kiri ke kanan

padding-left: 140px;
 -webkit-transition-duration: 1s; }

Warna biru tu, boleh tukar left or right.

2. Bergerak memusing.

 -webkit-transition-duration: 1s;
    -moz-transform: rotate(6deg);
    -webkit-transform: rotate(6deg);
    }

3.Bergerak Ke atas ke bawah

 padding-bottom: 100px;
    -webkit-transition-duration: 1s;
    }

Back to Tutorial