Membuat Efek Warna Warni Dengan CSS

Setelah lama membicarakan tentang widget, jQuery, dll, Seperti contohnya Membuat Tombol Smooth Back To Top dengan jQuery. Namun pada kesemoatan kali ini, saya akan mencoba membagikan trik kepada sobat blogger tentang CSS untuk dekorasi sebuah elemen dalam blog. Elemen sangat diperlukan dalam menyusun sebuah penampilan bahkan warna dalam blog. Sebuah blog akan menjadi lebih indah jika di dalam blog tersebut terdapat elemen warna yang dapat berganti-ganti seperti merah, kuning, hijau, biru, dll. Seperti pada judul pada artikel saya kali ini, saya akan sedikit mengulas tentang cara pengaplikasian elemen keyframe dalam modifikasi blog. Berikut langkah-langkah yang mana bisa terapkan dalam template blog sobat:

1. Login ke akun blogger sobat. Jika belum login klik tautan berikut: Login Page.
2. Pada menu Dashboard, Pilih Template --> Edit HTML.
3. Cari kode ]]></b:skin> dengan cara 
   Ctrl
   +
   F
   .
4. Kemuadian salin kode dibawah ini tepat dibawahnya.

Pada Tulisan

<style type='text/css'> 
/* Elemen yang akan diberi Efek */
#warna-tulisan { 
color:#333 
}

/* CSS yang digunkan */ 
@-webkit-keyframes gantiwarna {0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}
@-moz-keyframes gantiwarna {
0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}
@-keyframes gantiwarna {
0% {color:black}
20% {color:red}
40% {color:blue}
60% {color:green}
80% {color:gold}
100% {color:black}
}

/* Penerapan efek pada element yang akan diberi efek*/ 
#warna-tulisan { 
animation: 5s infinite gantiwarna linear; /* Waktu 10 detik */
-webkit-animation: 5s infinite gantiwarna linear 
}
</style>

Pada Background

<style>
#box {
  background-color:#333;
  width:100px;
  height:100px;
  margin:0 auto;
  border:5px solid #FFF;
}
@-webkit-keyframes gantiwarna2 {
  0% {background-color:black}
  20% {background-color:red}
  40% {background-color:blue}
  60% {background-color:green}
  80% {background-color:gold}
  100% {background-color:black}
}
@-moz-keyframes gantiwarna2 {
  0% {background-color:black}
  20% {background-color:red}
  40% {background-color:blue}
  60% {background-color:green}
  80% {background-color:gold}
  100% {background:black}
}
@-keyframes gantiwarna2 {
  0% {background-color:black}
  20% {background-color:red}
  40% {background-color:blue}
  60% {background-color:green}
  80% {background-color:gold}
  100% {background-color:black}
}
#box {
  animation:10s infinite gantiwarna2 linear;
  -webkit-animation:10s infinite gantiwarna2 linear;
} 
</style>

Untuk hasilnya silahkan klik tautan dibawah ini:

Demo

Pada intinya jika ingin menerapkan pada tulisan saja kode yang digunakan adalah color dan sebaliknya jika ingin menerapkan pada background tambahkan background-color.
Sekian ulasan saya tentang Efek Warna ini, semoga bermanfaat bagi kita semua.