Halo !! Saya Rokim. Ini adalah blog yang membahas informasi seputar dunia Blogger, SEO, Adsense, Widget, CSS, HTML, Template dan Tips Blogging menarik lainnya.

Membuat Background Warna Gradasi Bergerak (Animasi) di Blog

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

Untuk membahas tentang gradasi statis, anda dapat membaca postingan ini : Cara Membuat Gradasi Warna di Blog Support Semua Browser.

Sebelum kita menginjak pada tutorial membuat background gradient ini, kita terlebih dahulu mengetahui, kenapa sih akhir akhir ini banyak sekali blog yang memakai warna gradasi pada background template blog nya. Berikut penjelasanya...

Awal mula fenomena gradient di berbagai blog

Entah mengapa akhir akhir ini sangat buming sekali teknik css gradient ini, banyak sekali pemilik blog secara serentak merubah background tamplatenya menjadi warna gradient. Sehingga banyak saya temukan blog yang membahas topik tentang membuat background gradient ini.

Sebelum teknik ini buming, ada juga fenomena yaitu para developer blog secara serentak merubah tampilan blog mereka menjadi material design seperti Google pada awal tahun 2015. Mereka berbondong bondong merubah tampilan web mereka mengikuti Google.

Kini, setelah meredanya fenomena tersebut, muncul lagi teknik yang tak kalah hebohnya, yaitu membuat background gradient. Entah siapa yang melopori teknik gradient ini. Yang pasti teknik ini merajalela begitu saja.

Teknik ini memang sangat efektif untuk mempercantik blog sobat, karena teknik ini tidak akan membuat template blog sobat menjadi berat, mungkin hanya menambah beban kecil pada proses rendering. Namun hal sekecil itu tidak akan membuat kualitas kecepatan blog sobat menjadi menurun, hal tersebut dapat terjadi karena teknik ini tidak memakai javascript sama sekali.

Langkah membuat background gradient bergerak

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

Langkah #2
Sekarang tentukan bagian background yang mana yang mau sobat ubah menjadi warna gradient. Disini saya ambil contoh akan mengubah warna background pada bagian Header.

Langkah #3
Cari kode CSS yang merujuk pada area tersebut. Untuk mempermudah gunakan alat bantu pencarian dengan menekan ctrl + f.

Masukan kata Header, dan temukan kode CSS yang berbentuk 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".

Langkah #4
Setelah kode CSS yang sobat maksud 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;}

Langkah #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 tersebut alangkah baiknya jika diletakkan pada bagian bidang yang tidak terlalu besar ukurannya. Seperti pada Navbar, Footer, Sidenav atau yang lainnya.

Jangan memakai teknik ini untuk background body blog. Karena hal itu akan membuat proses render html sobat terasa lebih berat dan sangat tidak efektif bagi pengunjung blog.

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

Namun pada zaman sekarang, 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 dari saya, semoga apa yang saya sampaikan diatas dapat bermanfaat bagi sobat semua, tunggu artikel seputar blogger manarik lainya yang segera rilis, akhir kata, sekian dan terima kasih.
Beri Tanggapan :

Tambahkan Komentar Sembunyikan

Related Post