Skip to main content

Membuat Gradient Color Animasi Pada Backround Dengan CSS

Membuat Gradient Color Animasi Pada Backround Dengan CSS - Sepertinya sekarang sudah banyak sobat blogger yang menggunakan background dan teks dengan gradient color atau gradasi warna pada blog.

Nah, bagi Anda yang belum menggunkan gradient color dan ingin mencoba pada blog Anda, disini Saya akan coba membuat Gradient Color dengan animasi. Dengan menggunakan animasi gradien color, maka warna akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.

Sebelumnya Saya sudah posting Membuat Teks Berwarna (Gradasi) Hanya Dengan CSS Kali ini Saya akan Coba posting Membuat Gradient Color Animasi Pada Backround Dengan CSS.

Jika Anda berminat untuk memasangnya pada blog Anda, mari kita ikuti caranya beeikut ini.

Disini saya contohkan untuk membuat gradient warna pada background header, maka cari CSS #header-wrapper pada edit HYML di template blog Anda, jika sudah ketemu, biasanya CSS akan tampak atau mirip seperti dibawah ini.


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

Silahkan hapus kode background:#fff dan ganti dengan CSS gradient color animasi dibawah 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%}}

Jadi CSS selengkapnya akan tampak seperti dibawah ini.


 #header-wrapper {
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%}};
max-width: 1000px;
margin: 0 auto;
position: relative;
}

Anda juga bisa mengganti warna backgrondnya dengan mengganti kode warna #EE7752, #E73C7E, #23A6D5, #23D5AB dengan warna kesukaan Anda.
Kemudian Simpan template, dan lihat hasilnya.

You Might Also Like:

Buka Komentar