Membuat Background Gradient Animasi Pada Blog
Membuat Background Gradient Animasi pada Blog - Pada kali ini aku akan membahas wacana salah satu teknik CSS, adalah menciptakan background warna gradasi bergerak atau gradient animasi. Gradasi dalam CSS terbagi menjadi 2, adalah gradasi yang statis atau diam, dan gradasi dinamis atau yang bergerak. Namun dalam postingan kali ini kita akan membahas gradasi animasi saja.
Entah mengapa simpulan akibat ini sangat buming sekali teknik css gradient ini, berbagai pemilik blog secara serentak merubah background tamplatenya menjadi warna gradient. Sehingga banyak aku temukan blog yang membahas topik wacana menciptakan background gradient ini.
Teknik ini memang sangat efektif untuk mempercantik blog sobat, alasannya teknik ini tidak akan menciptakan template blog teman menjadi berat, mungkin hanya menambah beban kecil pada proses rendering. Namun hal sekecil itu tidak akan menciptakan kualitas kecepatan blog teman menjadi menurun, hal tersebut sanggup terjadi alasannya teknik ini tidak menggunakan javascript sama sekali.
Kode tersebut niscaya terletak diantara <b:skin> dan </b:skin> atau <style> dan </style>.
Langkah #4
Setelah isyarat CSS yang teman maksud tersebut sudah ketemu, silahkan ganti kode background:#fff dengan isyarat CSS gradient bergerak dibawah ini.
Sehingga susunan isyarat tersebut akan menjadi menyerupai ini.
Langkah #5
Kemudian save perubahan tema tersebut, dan lihat hasilnya.
Catatan : Untuk pemasangan isyarat warna gradasi tersebut alangkah baiknya jikalau diletakkan pada bab bidang yang tidak terlalu besar ukurannya. Seperti pada Navbar, Footer, Sidenav atau yang lainnya. Sumber https://ramadaniad.blogspot.com/
Entah mengapa simpulan akibat ini sangat buming sekali teknik css gradient ini, berbagai pemilik blog secara serentak merubah background tamplatenya menjadi warna gradient. Sehingga banyak aku temukan blog yang membahas topik wacana menciptakan background gradient ini.
Teknik ini memang sangat efektif untuk mempercantik blog sobat, alasannya teknik ini tidak akan menciptakan template blog teman menjadi berat, mungkin hanya menambah beban kecil pada proses rendering. Namun hal sekecil itu tidak akan menciptakan kualitas kecepatan blog teman menjadi menurun, hal tersebut sanggup terjadi alasannya teknik ini tidak menggunakan javascript sama sekali.
Langkah menciptakan background gradient bergerak
Langkah #1
Buka menu Theme >> Edit HTML, sehingga akan keluar mode edit HTML sobat.
Langkah #2
Sekarang tentukan bab background yang mana yang mau teman ubah menjadi warna gradient. Disini aku ambil teladan akan mengubah warna background pada bab Header.
Langkah #3
Cari isyarat CSS yang merujuk pada area tersebut. Untuk mempermudah gunakan alat bantu pencarian dengan menekan ctrl + f.
Masukan kata Header, dan temukan isyarat CSS yang berbentuk menyerupai dibawah ini.
Langkah #2
Sekarang tentukan bab background yang mana yang mau teman ubah menjadi warna gradient. Disini aku ambil teladan akan mengubah warna background pada bab Header.
Langkah #3
Cari isyarat CSS yang merujuk pada area tersebut. Untuk mempermudah gunakan alat bantu pencarian dengan menekan ctrl + f.
Masukan kata Header, dan temukan isyarat CSS yang berbentuk menyerupai dibawah ini.
header-wrapper {background:#fff; width:100%; height:auto;} Kode tersebut niscaya terletak diantara <b:skin> dan </b:skin> atau <style> dan </style>.
Langkah #4
Setelah isyarat CSS yang teman maksud tersebut sudah ketemu, silahkan ganti kode background:#fff dengan isyarat 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 isyarat tersebut akan menjadi menyerupai 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.
Anda juga sanggup mengganti warna gradasi tersebut dengan mengganti isyarat warna #ee5952, #ea3a7e, #20aadb, #23e0b3 sesuka hati sobat.
Catatan : Untuk pemasangan isyarat warna gradasi tersebut alangkah baiknya jikalau diletakkan pada bab bidang yang tidak terlalu besar ukurannya. Seperti pada Navbar, Footer, Sidenav atau yang lainnya. Sumber https://ramadaniad.blogspot.com/
