Hover Link Warna Pelangi - Rainbow Color Effect with css3 Animation

Saipul Muiz

CSS3, css3 animation, Effect, Tutorial BlogDETIK, Tutorial Blogger

Saturday, June 30, 2012

2 Komentar

Dalam bulan-bulan terakhir ini Opera telah mulai support terhadap css3. Sebuah kemajuan yang sangat menggembirakan yang mampu menggugah semangat baru untuk kembali berkarya. Yah...., selama ini gubhugreyot sama sekali memang belum mempostingkan desain atau tutorial yang berkaitan dengan css3 animation, dimana penundaan posting tentang css3 ini karena belum semua browser besar mendukung secara penuh. Kini setelah Opera juga sudah support penuh (hanya tinggal IE yg belum mendukung css3), maka tak ada lagi kendala & hambatan untuk membuat tutorial ataupun desain yang melibatkan penggunaan css3 animation. Untuk mengawali posting tentang css3 animation, kita akan membuat sebuah efek warna pelangi pada hover teks link yang hanya menggunaakan kode css. tentu saja dalam hal ini adalah css3 animation. Bagi sobat-sobat blogger yang selama ini menggunakan javascript dan ingin merubahnya menjadi dalam kode css, silahkan ikuti tutorial berikut.

D E M O

Pertimbangan menggunakan css3 animation untuk efek pelangi pada hover teks link :

1. Semua browser telah support terhadap css3 animation.
   Bagi anda yg masih menggunakan browser lama, silahkan segera download browser terbaru yang telah mendukung css3 animation. Anda bisa membuka link download melalui menu disebelah kiri halaman blog.
2. Penggunaan css3 animation membuat kode menjadi lebih irit & ringkas, sehingga loading blog menjadi tak banyak terpengaruh.
3. Penggunaan kode css3 memudahkan blogger untuk membuat berbagai variasi warna pada efek pelangi yang ditimbulkan.
4. Penggunaan kode css3 animation lebih memudahkan blogger untuk mengembangkan berbagai efek baru (efek tambahan).

Kode CSS Hover Pelangi:

@keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-o-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-ms-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-moz-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
@-webkit-keyframes GRhoverpelangi{0%{color:black;}19%{color:red;}25%{color:brown;}40%{color:blue;}55%{color:green;}70%{color:orange;}85%{color:magenta;}100%{color:black;}}
a:hover{ /* original code by : gubhugreyot.blogspot.com 30 Juni 2012 */ 
 animation:GRhoverpelangi 4s infinite; /* Standart */
 -o-animation:GRhoverpelangi 4s infinite; /* Opera */
 -ms-animation:GRhoverpelangi 4s infinite; /* IE */
 -moz-animation:GRhoverpelangi 4s infinite; /* Firefox */
 -webkit-animation:GRhoverpelangi 4s infinite; /* Safari and Chrome */  
}

Cara menyimpan Kode CSS Efek pelangi pada Hover Teks Link:

1. Login ke Blogger.
2. Dasbor (Dasboard).
3. Design (Rancangan).
4. Edit HTML.
5. Backup Template.
6. Cari Kode ]]></b:skin>, kemudian letakkan kode css tepat di atasnya.
7. Klik Simpan Template (Save Template)

Catatan/keterangan:

1. Untuk merubah variasi warna hover link dapat dilakukan dengan merubah warna (black, red, brown, blue, green, orange, magenta, black) yang terdapat di kode css.
2. Jika menghendaki data warna, sampeyan bisa melihat tabel lengkap data setiap warna berikut namanya dengan klik di sini.
3. Panduan cara Backup Template, cara cari kode dan berbagai cara menyimpan kode css, javascript dan xHTML dapat dibuka pada Special Tutorials di menu sebelah kiri halaman.
4. Jika anda menggunakan template blogger baru (New Blogger Interface), anda dapat mengikuti panduan cara menyimpan kode css-nya melalui link berikut:
   Cara simpan kode html di New Blogger Interface

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini:

Posting » Setu Kliwon, Juni, 30, 2012

» Happy Blogging - gubhugreyot «