Cara Membuat Efek Animasi Gradasi Pada Header Template Viomagz

Nah, kali saya akan memberikan tutorial bagaimana cara membuat atau memberi efek gardasi pada header blog. Template yang saya gunakan adalah template premium dari Mas Sugeng, Template ini namanya Viomagz, Jadi bagi kalian yang mempunyai template yang sama dengan saya maka dapat mengikuti langkah - langkah berikut ini :

1. Langkah pertama silahkan login ke blogger kalian >> Tema >> Edit Html.

2. Pasang kode CSS berikut ini, diatas ]]></b:skin>

.ignielPelangi {

    background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);

    background-size: 400% 400%;

    -webkit-animation: ignielGradient 15s ease infinite;

    -moz-animation: ignielGradient 15s ease infinite;

    animation: ignielGradient 15s ease infinite;

}

@-webkit-keyframes ignielGradient {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@-moz-keyframes ignielGradient {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@keyframes ignielGradient {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

3. Kemudian Cari <div id='header-container'>, ganti dengan kode berikut

<div id='header-container' class='ignielPelangi'>

4. Kemudian kalian cari kode #header-container {, yang akan terlihat seperti berikut

/* HEADER */

#header-container {

 background: $(header.background.kiri);

 background: linear-gradient(to right, $(header.background.kiri), $(header.background.kanan));

 position: absolute;

 top: 0;

 left: 0;

 right: 0;

 width: 100%;

 z-index: 999;

 height: 48px; 

5. Hapus kode background yang sudah saya tandai dengan warna merah karena akan digantikan oleh background gradasi yang akan kita pasang. Sehingga hasil akhir setelah dihapus

/* HEADER */

#header-container {

 position: absolute;

 top: 0;

 left: 0;

 right: 0;

 width: 100%;

 z-index: 999;

 height: 48px;

6. Kalau sudah selesai tinggal Simpan dan lihat hasilnya.

Tips.

1. Untuk mengganti warna kalian tinggal masukkan kode warna yang kalian suka di background: linear-gradient (45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f).

2. Untuk melihat memperbesar atau memperkecil warna kalian bisa rubah background-size: 150% 150%;

3. Untuk mempercepat atau memperlambat animasi degradasinya kalian bisa rubah waktunya 15s semakin besar nilai maka akan semakin lambat animasi gradasi warnanya

Sumber CSS https://www.igniel.com/2018/05/animation-background-gradient-color-css.html