Membuat Background Warna Gradasi Bergerak (Animasi) di Blog

Pada kali ini saya akan membahas tentang salah satu trik CSS yang sangat mengagumkan, yaitu membuat background warna gradasi bergerak atau sering kita sebut dengan gradient animasi. Gradasi dalam CSS terbagi menjadi 2, yaitu gradasi statis atau diam, dan gradasi dinamis atau dapat bergerak. Namun dalam postingan kali ini, kita akan membahas warna gradasi animasi saja.

Jika anda ingin mengetahui tentang cara membuat gradasi statis pada blog / website, anda dapat membaca postingan yang telah saya buat dengan judul Cara Membuat Gradasi Warna di Blog Support Semua Browser.

Sebelum kita ke tutorial membuat color background gradient ini, kita akan terlebih dahulu mengetahui sebab kanapa akhir akhir ini banyak sekali pemilik blog me-redesign blog mereka dengan warna warna gradasi pada background template blog mereka. Berikut penjelasanya...
(Klik untuk langsung ke Cara Membuat Gradasi)

Awal Mula Fenomena Color Gradient di Berbagai Blog / Website

Akhir akhir ini sangat buming sekali teknik css color gradient ini, banyak pemilik blog secara serentak me-redesign tampilan warna background tamplate mereka menjadi warna gradasi. Hal ini membuat trend style blog juga ikut berubah, yang pada awalnya mamakai warna statis, kini mereka merubah menjadi warna dinamis (color gradient)

Fenomena ini membuat banyak sekali kita temukan blog / website yang membahas topik tentang cara atau tutorial membuat background gradient pada blog / website.

Sebelum teknik color gradient ini buming, ada juga teknik css yang sudah buming terlebih dahulu. Tepatnya pada akhir tahun 2015, para developer blog seluruh dunia secara serentak merubah tampilan blog mereka menjadi tampilan material design seperti tampilan baru milik Google pada awal tahun 2015. Hal ini membuat style trend template pada tahun tersebut menjadi material design.

Setelah fenomena material design tersebut sedikit mereda, muncul lagi teknik css yang tak kalah viral, yaitu membuat background color gradient. Entah siapa yang melopori teknik gradient ini. Yang pasti teknik ini menyebar begitu saja.

Teknik warna gradasi ini dinilai sangat efektif untuk mempercantik tampilan blog tanpa membuat blog anda menjadi berat, mungkin hanya menambah beban kecil pada proses rendering. Namun hal tersebut itu tidak akan membuat kualitas kecepatan blog sobat menjadi menurun. Teknik warna gradasi bergerak (animasi) pada kali ini tidak memakai javascript sama sekali, alias murni tercipta hanya dari css.

Cara Membuat Warna Background Gradient Bergerak (Animasi)

Cara #1
Buka menu Theme >> Edit HTML, sehingga akan keluar mode edit HTML.

Cara #2
Tentukan bagian mana yang ingin anda rubah warna background nya menjadi warna gradient. Disini saya ambil contoh akan mengubah warna background pada bagian Header.

Cara #3
Cari kode CSS yang menunjukkan pada section header. Untuk mempermudah dalam pencarian, gunakan alat bantu pencarian dengan menekan tombol ctrl + f.

Masukan kata "Header", maka anda akan diarahkan ke css dari header, cari kode css seperti dibawah ini

#header-wrapper {background:#fff; width:100%; height:auto;}

Kode tersebut pasti terletak diantara <b:skin> dan </b:skin> atau <style> dan </style>.
Dan kode tersebut biasanya diikuti dengan kata "wrapper". Cari perlahan - lahan hingga ketemu.

Cara #4
Setelah kode css dari section header tersebut sudah ketemu, silahkan ganti kode background:#fff dengan kode CSS gradient bergerak dibawah ini.

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%}

Sehingga susunan kode tersebut akan menjadi seperti ini.

#header-wrapper {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%};
width:100%; height:auto;}

Cara #5
Kemudian save perubahan tema tersebut, dan lihat hasilnya.

Sobat juga dapat mengganti warna gradasi tersebut dengan mengganti kode warna #ee5952, #ea3a7e, #20aadb, #23e0b3 sesuka hati sobat.

Tips Memasang Warna Gradasi Bergerak.

Untuk pemasangan kode warna gradasi bergerak tersebut alangkah baiknya jika diletakkan pada section yang memiliki width dan height tidak terlalu besar. Seperti pada section navbar, footer, sidenav atau yang lainnya.

Jangan memakai teknik ini untuk background body blog / website. Karena hal tersebut akan membuat proses rendering html sobat terasa lebih berat dan sangat tidak efektif bagi pengunjung blog, terutama bagi pengunjung yang berkunjung melalui hp dengan spek kentang.

Menggunakan teknik gradasi seperti cara ini juga ada kelemahannya, yaitu pada platform browser tertentu, biasanya browser old teknik gradasi ini tidak akan bisa tampil, seperti pada IE, teknik ini akan nampak seperti putih tanpa adanya warna gradasi.

Namun tenang saja, zaman sekarang browser internet explorer (IE) sudah banyak ditinggalkalkan dan beralih ke browser yang lebih canggih, yang mana sudah dapat menampilkan hasil rendering dari HTML5 dan CSS3.

Cukup sekian pembahasan teknik CSS membuat warna gradasi bergerak dengan judul Cara Membuat Background Warna Gradasi Bergerak (Animasi) di Blog, semoga apa yang saya sampaikan diatas dapat bermanfaat bagi sobat semua, tunggu artikel tips dan trik seputar blogger manarik lainya yang segera saya buat, akhir kata, sekian terima kasih dan selamat mencoba.