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
0 komentar:
Posting Komentar