Cara Membuat Animasi Color Gradien Menggunakan CSS - Terbaru

Cara Membuat Animasi Color Gradien Menggunakan CSS. Apa itu Color Gradien , Color Gradien adalah sebuah visual effect yang dihasilkan oleh perubahan beberapa warna dan pergeseran warna (gradasi) diatara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat kita atur sesuka hati baik secara vertical (dari atas ke bawah atau dari bawah ke atas), ataupun secara horizontal (dari kiri ke kanan atau kanan ke kiri).

Pada era jaman sekarang ini pasti sudah banyak para blogger di luaran sana yang menggunakan Animasi Color Gradien ini. Tepatnya seperti yang ada di header pada blog saya ini. Nah, bagi Anda yang belum menggunkan color gradient  dan ingin mencoba pada blog Anda, disini Saya akan coba membagikan tutorial membuat Animasi Color Gradient. Dengan menggunakan animasi color gradien, maka warna pada blog kita akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.

Tapi bagi sobat yang belum mengeri atau awam pasti akan kesulitan untuk menerapkan CSS Animasi Gradien. Tapi tenang saja sobat gak usah khawatir disini saya akan mengulasnya secara tuntas, jelas dan padat hee. Untuk menerapkan Color Gradien  pada blog sangat mudah, untuk lebih jelasnya mari simak baik-baik tutorial kali ini.

Cara Membuat Animasi Color Gradien Menggunakan CSS

1. Silahkan masuk ke Dashboard Blog

2. Setelah itu Klik Template/Tema > Klik Edit HTML

3. Nah dibagian ini cari kode #header-wrapper dengan menekan Ctrl+F pada keyboard untuk mencari kode HTML tersebut. Kalau di blog saya, seperti kode di bawah ini,, lalu hapus kode background: #000; seperti dibawah ini.

#header-wrapper {
 background: #000;
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

4. Tepatnya hasilnya akan seperti ini setelah di hapus.

#header-wrapper {
 max-width: 1000px;
 margin: 0 auto;
 position: relative;
}

5. Setelah step di atas sudah selesai maka lanjut copy code di bawah ini.

{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);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%}}

6. Tapi sebelumnya buat pemanggilan kode terlebih dahulu, misal #header-wrapper. Contohnya seperti kode di bawah ini. Cermati baik-baik antara code nomer 5 dan 6

#header-wrapper, #back-to-top{background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);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%}}

7. Lalu copy kode di atas tadi dan pastekan tepat dibawah  kode <style> or <b:skin>
8. Lalu Save/Simpan Template
9. Selesai, silahkan kalian lihat perubahnnya heee.

Pemanggilan kode

Pada pemanggilan kode pada bagian HTML misal kan jika saya ingin memanggil kode <div class="Contoh"/> maka yang harus dipanggil ada kode .contoh , kenapa pakai titik? jika kamu tahu perbedaan antara Class dan Id maka akan tahu heee.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode pada nomor 6 yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

NB : Kalau pada blog saya ini saya menggunakan tag pemanggilan  #header-container, dan saya meletakknya  tepat di atas ]]></b:template-skin>

Nah Gimana Sobat Mamang mudah banget bukan? yaps, untuk mengganti warna dengan warna yang kalian inginkan silahkan ganti pada bagian warna #EE7752, #E73C7E, #23A6D5, #23D5AB dan ganti dengan warna yang mau dipakai oleh kalian. Buat kalian yang bingung mencari kode warna silhkan ke Sini.

Nah itulah cara untuk membuat gradien color di blog. Semoga berkat adanya artikel kali ini dapat menambah wawasan dan ilmu pengetahuan sobat semua. Apabila masih ada hal yang kurang di pahami silahkan tanyakan di kolom komentar.

"Special thanks for Kang Iyan"