Membuat Animasi Gradient Warna Dengan CSS Untuk Blogger

Warna adalah elemen penting dalam kehidupan, warna dapat memberi kesan terhadap suasana atau benda.Tak heran dalam sebuah dekorasi ruangan warna memberikan kesan sejuk, hangat dan dingin.

Tak terkecuali dalam mendekorasi suatu blog, warna memberikan kesan penting didalamnya. Jika tampilan warna blog menarik tak heran itu pun juga bisa menarik pengunjung.

Kali ini kenny akan memberikan tips memberikan warna background pada suatu element blog bisa header, footer, sitebar, ataupun body. Tentu saja bukan warna monoton hanya dengan satu warna saja.

Kenny akan memberikan lebih dari satu warna yang di tampilkan elemnet tersebut, teknik ini sebenarnya sudah booming beberapa tahun yang lalu, tetapi masih ok kok untuk blogger yang ingin mempercantik blognya.

Kita bisa menggunakan teknik Gradasi/Gradient. Gradasi warna adalah tingkatan warna yang di kembangkan dari lebih dari satu warna didalamnya yang tidak mengubah warna itu sendiri.

Disini kenny bukan memberikan sebuah warna yang diam atau cuma gradasi seperti gambar dibawah

Tetapi kenny akan mengkombinasikan dengan efek animasi dari CSS tanpa Javascript. Langsung saja

1. Cari nama tag element yang ingin di ubah dengan bantuan inspect elemen seperti gambar di bawah

2. Masuk Blogger - Tema - Edit HTML dan cari kode tagnya contoh tag Footer saat di cari edit tema akan menggunakan #Footer atau sesuaikan dengan tag yang di inspect elemen tadi
3. Jika sudah ketemu anda bisa hapus tag backgroundnya dan ganti dengan kode CSS di bawah

background: linear-gradient(-50deg, #ee5952, #ea3a7e, #20aadb, #23e0b3);
background-size: 400% 400%;
-webkit-animation: Gradient 15s ease infinite;
-moz-animation: Gradient 15s ease infinite;
animation: Gradient 15s ease infinite;} 
@-webkit-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@-moz-keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}

4. Contoh Gambar Sudah selesai

5. Biasakan pratinjau sebelum save

Jika ingin merubah warnanya anda bisa ganti kode #ee5952, #ea3a7e, #20aadb, #23e0b3 sesuai keinginan anda.
Tips dari kenny jangan memberikan gradasi warna pada bagian body artikel karena akan menggangu pengunjung cukup gunakan pada footer, header, aside social media dll.

Baca Juga: Membuat menu blog berdasarkan label
Sekian trick dari kenny jangan lupa ucapkan terima kasihnya