√ Membuat Gradient Color Animasi pada Background Menggunakan CSS seperti BG BroGerrr - AdityaTekno

Social Items

Membuat Gradient Color Animasi pada Background dengan CSS seperti BG BroGerrr

Membuat Gradient Color Animasi pada Background Menggunakan CSS - Welcome back sahabat setia AdityaTekno.com, ada kabar bagus nih buat sobat. Apa itu? Penasaran? Baik, dipostingan pada hari ini saya akan berbagi tutorial tentang bagaimana cara membuat gradient color animasi seperti pada blog saya ini. Nah, pasti kalian pada pengen kan. hehe

Baca Juga: Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot


Bagi anda yang pengen atau belum menggunkan gradient color dan ingin mencoba pada blog anda, disini saya akan berbagi tutorial membuat Gradient Color dengan animasi. Dengan menggunakan animasi gradient color, maka warna akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.



Cara Membuat Gradient Color Animasi pada Background dengan CSS


Disini saya contohkan untuk membuat gradient warna pada background header, maka cari CSS #header-wrapper pada edit HTML di template blog anda, atau jika anda kesulitan mecari dan tidak tahu nama background header CSS nya, anda bisa menggunakan Inspect pada blog anda. Nah, 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(-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%}}

 Jadi CSS nya akan tampak seperti dibawah 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%}}; max-width: 1000px;margin: 0 auto;position: relative;}

Kemudian simpan tema. dan lihat hasilnya.

Note:
Anda juga bisa mengganti warna backgroundnya dengan mengganti kode warna #ee5952, #ea3a7e, #20aadb, #23e0b3 dengan warna kesukaan Anda. Dan jika footer blog anda ingin beranimasi juga, tinggal tambahkan nama footer css nya. Misalnya #footer-wrapper

Demikian tutorial tentang Membuat Gradient Color Animasi pada Background Menggunakan CSS. Semoga tutorial ini bisa bermanfaat bagi anda. Good Luck! dan Sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.


sumber referensi:
https://www.websitemini.net/2018/04/membuat-gradient-color-animasi-pada.html

Membuat Gradient Color Animasi pada Background Menggunakan CSS seperti BG BroGerrr

Membuat Gradient Color Animasi pada Background dengan CSS seperti BG BroGerrr

Membuat Gradient Color Animasi pada Background Menggunakan CSS - Welcome back sahabat setia AdityaTekno.com, ada kabar bagus nih buat sobat. Apa itu? Penasaran? Baik, dipostingan pada hari ini saya akan berbagi tutorial tentang bagaimana cara membuat gradient color animasi seperti pada blog saya ini. Nah, pasti kalian pada pengen kan. hehe

Baca Juga: Cara Membuat Tombol Buka Tutup Komentar Keren + Gradient Color pada Blog Blogspot


Bagi anda yang pengen atau belum menggunkan gradient color dan ingin mencoba pada blog anda, disini saya akan berbagi tutorial membuat Gradient Color dengan animasi. Dengan menggunakan animasi gradient color, maka warna akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.



Cara Membuat Gradient Color Animasi pada Background dengan CSS


Disini saya contohkan untuk membuat gradient warna pada background header, maka cari CSS #header-wrapper pada edit HTML di template blog anda, atau jika anda kesulitan mecari dan tidak tahu nama background header CSS nya, anda bisa menggunakan Inspect pada blog anda. Nah, 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(-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%}}

 Jadi CSS nya akan tampak seperti dibawah 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%}}; max-width: 1000px;margin: 0 auto;position: relative;}

Kemudian simpan tema. dan lihat hasilnya.

Note:
Anda juga bisa mengganti warna backgroundnya dengan mengganti kode warna #ee5952, #ea3a7e, #20aadb, #23e0b3 dengan warna kesukaan Anda. Dan jika footer blog anda ingin beranimasi juga, tinggal tambahkan nama footer css nya. Misalnya #footer-wrapper

Demikian tutorial tentang Membuat Gradient Color Animasi pada Background Menggunakan CSS. Semoga tutorial ini bisa bermanfaat bagi anda. Good Luck! dan Sampai jumpa dipostingan selanjutnya. Salam AdityaTekno.com.


sumber referensi:
https://www.websitemini.net/2018/04/membuat-gradient-color-animasi-pada.html
Load Comments

Dapatkan Artikel Tips AdSense, Blogging, SEO setiap harinya.

Notifications

Disqus Logo