Seven Animating CSS3 Gradients

Mulai kembali mosting setelah rehat libur panjang. Malas sebenarnya untuk memulai posting lagi, karena tertinggal jauh topic dari link source sumber developer :-s Maaf lahir dan bathin Koben ucapkan sebelumnya buat blogger pengunjung setia blog akuh :"> Tema postingan kali ini akan berbicara mengenai atribut gradients. Berbicara tentang Gradient tidak akan lepas dari penggabungan beberapa warna dan akan terlihat lebih eksotis dibandingkan dengan menggunakan satu warna saja! Berikut contoh efek warna linear-gradient.

Setelah mengetahui seperti apa gradient itu, bagaimana bila ditambahkan dengan efek animasi terhadap warnanya? Sudah pasti menjadi sesuatu yg full stylish b-) Buatlah kode CSS tombol yg kalian inginkan dengan memakai effect color gradient.
Contoh:

Tombol

.tombol {
background-image: linear-gradient(rgba(255,255,255,0.6),rgba(0,0,0,0.6));
display: inline-block;
height: 55px;
width: 120px;
line-height: 55px;
margin: 5px;
color: white;
font-size: 12px;
font-weight: bold;
border-radius: 5px;
text-align: center;
}Untuk kode background-image dan border-radius silahkan lakukan prefix terlebih dahulu. Berikut beberapa generator prefix tools

• prefixr.com
• prefixmycss.com
• cssprefixer.appspot.com

Setelah membuat kode tombol saatnya memberikan sentuhan efek animasi! Jadinya akan sbb...

RGB

Kode animasi RGB#rgb {
background-color: #FF0;
animation: rgb 3s infinite alternate;
}
@keyframes rgb {
50% {background-color: #06F;}
100% {background-color: #F00;}
}Kode @keyframes di prefix juga yah, ini toolsnya

• tools.web-gate.fr/prefixMyKeyframes

Gabungkan kode animasi dengan kode tombol dalam penulisan syntax HTML!<a class="tombol" id="rgb">TITLE</a>Macam-macam tombol dengan menggunakan animating css3 gradients

Named Colors

#namedcolors {
 background-color: red;
 animation: namedcolors 0.3s infinite alternate;
}
@keyframes namedcolors {
 100% {background-color: orange;}
}

<a class="tombol" id="namedcolors">Named Colors</a>

Hue

#hue {
 background-color: hsl(0, 100%, 50%);
 animation: hue 3s infinite alternate;
}
@keyframes hue {
 20% {background-color: hsl(72, 100%, 50%);}
 40% {background-color: hsl(144, 100%, 50%);}
 60% {background-color: hsl(216, 100%, 50%);}
 80% {background-color: hsl(288, 100%, 50%);}
 100% {background-color: hsl(360, 100%, 50%);}
}

<a class="tombol" id="hue">Hue</a>

Saturation

#saturation {
 background-color: hsl(0, 0%, 50%); 
 animation: saturation 3s infinite alternate;
}
@keyframes saturation {
 100% {background-color: hsl(0, 100%, 50%); }
}

<a class="tombol" id="saturation">Saturation</a>

Lightness

#lightness {
 background-color: hsl(0, 100%, 0%); 
 animation: lightness 3s infinite alternate;
}
@keyframes lightness {
 50% {background-color: hsl(0, 100%, 50%); }
 100% {background-color: hsl(0, 100%, 100%); }
}

<a class="tombol" id="lightness">Lightness</a>

Top Flat

#topflat {
 color: #999;
 background-color: white;
 background-image: linear-gradient(rgba(0, 0, 0, 0), black);
 animation: topflat 3s infinite alternate;
}
@keyframes topflat {
 100% {background-color: black;}
}

<a class="tombol" id="topflat">Top Flat</a>

Bottom Flat

#bottomflat {
 color: #999;
 background-color: black;
 background-image: linear-gradient(white, rgba(255, 255, 255, 0));
 animation: bottomflat 3s infinite alternate;
}
@keyframes bottomflat {
 100% {background-color: white;}
}

<a class="tombol" id="bottomflat">Bottom Flat</a>Resource by: http://thecodeplayer.com/walkthrough/animating-css3-gradients
Semoga bermanfaat :)
Happy coding \m/