Membuat Link hover warna - warni dengan CSS3

Membuat Link hover warna - warni dengan CSS3
Mungkin sobat sudah pernah melihat atau menggunakan trik ini menggunakan javascript dan jquery yang membuat link jadi berkedip warna - warni,tetapi trik menggunakan javasript itu bisa membuat blog kita berat
,bahkan jadi hang...nah,disini saya akan kasih tau gimana cara'a membuat kostum link hover dengan pilihan warna yang bisa kita atur sendiri menggunakan KEYFRAME CSS3.trik ini sangat mudah digunakan,dan tidak akan memberatkan blog sobat karena penggunaan css'a tidak terlalu banyak.


untuk contoh'a bisa sobat lihat dan rasakan di blog ini,tpi harus menggunakan browser yang mendukung CSS3 ya..sayang'a mozila firefox belum mendukung TT..TT
sobat coba menggunakan google chrome deh..
langsung aja saya kasih tutorial'a nih n_n

Pertama,buka blog sobat
buka Rancangan => edit HTML

lalu masukan css dibawah ini di template sobat.

a:hover {
-webkit-animation-name: pulsate;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease-in-out;
}
@-webkit-keyframes pulsate {
0% { background-color:#DEDEDE;}
5% { background-color:#109F9D;}
10% { background-color:#B19FD9;}
15% { background-color:#D600AF;}
20% { background-color:#E9E32E;}
40% { background-color:#38374A; }
45% { background-color:#711943; }
50% { background-color:#3FFFF5; }
55% { background-color:#1F67C5; }
60% { background-color:#6541B3; }
80% { background-color:#45002D; }
90% { background-color:#109F9D; }
100% { background-color:#DEDEDE; }
}

Keterangan1:
kode "a:hover" bisa sobat ganti ke elemen yang sobat atur sendiri bagian mana yang akan diberi efek hover.

CONTOH:

#header a

kita tambahkan efek hover menjadi

#header a:hover {...}

intinya,kita tinggal menambahkan kode" :hover " pada css yang kita inginkan.


sedangkan kode "a" adalah bagian tulisan/link.

Keterangan2:
"-webkit-animation-name: pulsate;" adalah css nama animasi yang terhubung/terikat ke kode "@-webkit-keyframes pulsate"

nama animasi harus sama,"pulsate"
tetapi bisa sobat ganti dengan nama sobat sendiri n_n


"-webkit-animation-duration: 3s;"
adalah durasi animasi

"-webkit-animation-timing-function: ease-in-out;"
adalah fungsi dari animasi ini


Keterangan3
0% sampai 100% adalah proses animasi dari pertama sampai akhir animasi,tiap perses/proses'a bisa kita atur efect'a di tiap frame.
bisa dari 0% sampai 100% atau lebih,tergantung banyak'a animasi yang kita tambahkan.

color:#DEDEDE; adalah kode warna Hexadesimal link/tulisan
background-color:#DEDEDE adalah kode untuk warna background,
atau bisa disingkat menjadi background saja.



MODIFIKASI:

Kode diatas tadi hanya merubah warna pada background link,jadi...
bagaimana dengan link'a?ini dia trik'a....

"background-color:#DEDEDE;" sperti yang kita tahu,background-color adalah kode css yang biasa digunakan untuk mengganti warna background,atau bisa disingkat menjadi background:#kodewarna;
untuk merubah warna link'a,kita tinggal menambahkan "color:#kode warna;"
jadi tinggal hapus aja warna'a seperti contoh di bawah ini.


@-webkit-keyframes pulsate {
0% { color:#DEDEDE;}
5% { color:#109F9D;}
10% { color:#B19FD9;}
15% { color:#D600AF;}
20% { color:#E9E32E;}
40% { color:#38374A; }
45% { color:#711943; }
50% { color:#3FFFF5; }
55% { color:#1F67C5; }
60% { color:#6541B3; }
80% { color:#45002D; }
90% { color:#109F9D; }
100% { color:#DEDEDE; }
}

bila kita ingin menambahkan efek kedua'a/background dan warna,tinggal dimasukan kedua css'a jadi seperti dibawah ini.


@-webkit-keyframes pulsate {
0% { background:#ffffff;color:#DEDEDE;}
5% { background:#000000;color:#109F9D;}
10% { background:#ffffff;color:#B19FD9;}
15% { background:#000000;color:#D600AF;}
20% { background:#ffffff;color:#E9E32E;}
40% { background:#2b2b2b;color:#38374A; }
45% { background:#ffffff;color:#711943; }
50% { background:#2b2b2b;color:#3FFFF5; }
55% { background:#ffffff;color:#1F67C5; }
60% { background:#2b2b2b;color:#6541B3; }
80% { background:#ffffff;color:#45002D; }
90% { background:#2b2bb;color:#109F9D; }
100% { background:#ffffff;color:#DEDEDE; }
}


ada satu lagi nih...
ingin tambahkan efek campuran "bold,italic,underline,font-family,font-size,shadow dan border"?
hahahaha,pusing dah ngeliat'a =,="
bisa kq,tinggal ditambahkan aja css'a

Setelah itu,buka blog sobat dan lihat hasilnya n_n

Selamat mencoba,dan jangan lupa tinggalkan komentar'a ya n_n

Komentar

  1. Kunjungan pagi sobat.....ditunggu kunjungan baliknya yaw....

    BalasHapus
  2. Saya senang bang johannes bisa berbagi, tapi sayang aku pakai blog detik.

    BalasHapus
  3. walah... pusing dah...haha

    btw, apus aja tuh joh, komen si Software News...
    out of topic, SPAM

    BalasHapus
  4. salam sahabat
    bagus membuat link hover warna warni dengan css ini lebih praktis makasih ya

    BalasHapus
  5. greeting for you
    langsung bookmark aja wes membuat links hover warna warni ini

    BalasHapus
  6. kayaknya menarik nihh gannn..
    perrrrrrrrrlu di coba ke TKP...
    mksi buat tutorialnya..

    BalasHapus
  7. Menarik nih, coba dlu ah.
    Thanks sob artikelnya.

    BalasHapus
  8. keren nih.. bukmak dolo deh


    www.zegitiga.co.cc

    BalasHapus
  9. ane coba berhasil gan.thanks ilmunya

    BalasHapus
  10. sama-sama,thanks ya ^^
    silakan dicoba gan.

    BalasHapus
  11. kalo ingin repeat gimana gan?
    time 3s ka cuma selama 3 detik aja si animasi nya
    ane mau nya terus2 an gimana gan?

    BalasHapus
  12. Nah kalau menurut saya mas kalau untuk mozzila mungkin itu pake kode untuk mozila contoh di atas itu adalah -webkit- nah kalau untuk mozzila adalah -moz- mungkin ini akan support untuk mozzila

    BalasHapus
  13. @Donsteraiya,thx dah diingetin,postingan ini udah lama bgt,coz dlu blom bisa buat mozilla,tp skrg udah bisa,maklum lg males update post ==v

    BalasHapus
  14. tutorialnya mantep banget...
    jadi ngerti dah..
    blognya kakak keren abis
    bikin betah saja disini

    BalasHapus

Posting Komentar

"Maaf komentar anda tidak akan dibalas, karena blog ini sudah tidak aktif. Terima kasih"

"Sorry your comment will not be replied, because this blog has been inactive. Thank you"

Postingan populer dari blog ini

K-ON!! Blogger Template

Shiroi Blogger Template

Unbreakable Machine Doll Blogger template