Cara Menciptakan Animasi Color Gradien Memakai Css - Terbaru
Cara Membuat Animasi Color Gradien Menggunakan CSS. Apa itu Color Gradien , Color Gradien adalah sebuah visual effect yang dihasilkan oleh perubahan beberapa warna dan pergeseran warna (gradasi) diatara 2 warna atau lebih. Arah gradasi atau perubahan warna ini sanggup kita atur sesuka hati baik secara vertical (dari atas ke bawah atau dari bawah ke atas), ataupun secara horizontal (dari kiri ke kanan atau kanan ke kiri).Pada abad jaman kini ini niscaya sudah banyak para blogger di luaran sana yang memakai Animasi Color Gradien ini. Tepatnya menyerupai yang ada di header pada blog aku ini. Nah, bagi Anda yang belum menggunkan color gradient dan ingin mencoba pada blog Anda, disini Saya akan coba membagikan tutorial menciptakan Animasi Color Gradient. Dengan memakai animasi color gradien, maka warna pada blog kita akan berubah secara bergantian dengan warna yang sudah kita tentukan pada CSS animasi.
Tapi bagi sahabat yang belum mengeri atau awam niscaya akan kesulitan untuk menerapkan CSS Animasi Gradien. Tapi hening saja sahabat gak usah khawatir disini aku akan mengulasnya secara tuntas, terperinci dan padat hee. Untuk menerapkan Color Gradien pada blog sangat mudah, untuk lebih jelasnya mari simak baik-baik tutorial kali ini.
Cara Membuat Animasi Color Gradien Menggunakan CSS
1. Silahkan masuk ke Dashboard Blog
2. Setelah itu Klik Template/Tema > Klik Edit HTML
3. Nah dibagian ini cari arahan #header-wrapper dengan menekan Ctrl+F pada keyboard untuk mencari arahan HTML tersebut. Kalau di blog saya, menyerupai arahan di bawah ini,, kemudian hapus kode background: #000; seperti dibawah ini.
#header-wrapper { background: #000; max-width: 1000px; margin: 0 auto; position: relative; } 4. Tepatnya alhasil akan menyerupai ini sehabis di hapus.
#header-wrapper { max-width: 1000px; margin: 0 auto; position: relative; } 5. Setelah step di atas sudah final maka lanjut copy code di bawah 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%}} 6. Tapi sebelumnya buat pemanggilan arahan terlebih dahulu, misal #header-wrapper. Contohnya menyerupai arahan di bawah ini. Cermati baik-baik antara code nomer 5 dan 6
#header-wrapper, #back-to-top{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%}} 7. Lalu copy arahan di atas tadi dan pastekan sempurna dibawah kode <style> or <b:skin>
8. Lalu Save/Simpan Template
9. Selesai, silahkan kalian lihat perubahnnya heee.
Pemanggilan kode
Pada pemanggilan arahan pada bab HTML misal kan kalau aku ingin memanggil arahan <div class="Contoh"/> maka yang harus dipanggil ada arahan .contoh , kenapa pakai titik? kalau kau tahu perbedaan antara Class dan Id maka akan tahu heee.
Class dipanggil memakai tanda "Titik"
Id dipanggil memakai tanda "Pagar"
Lantas untuk memanggil arahan pada nomor 6 yaitu menyerupai ini.
<div class="header-wrapper"/>
kemudian buat cssnya
<style>
.header-wrapper{kode gradien}
</style>
NB : Kalau pada blog aku ini aku memakai tag pemanggilan #header-container, dan aku meletakknya sempurna di atas ]]></b:template-skin>
Nah Gimana gampang banget bukan? yaps, untuk mengganti warna dengan warna yang kalian inginkan silahkan ganti pada bab warna #EE7752, #E73C7E, #23A6D5, #23D5AB dan ganti dengan warna yang mau digunakan oleh kalian. Buat kalian yang gundah mencari arahan warna silhkan ke Sini.
Nah itulah cara untuk menciptakan gradien color di blog. Semoga berkat adanya artikel kali ini sanggup menambah wawasan dan ilmu pengetahuan sahabat semua. Apabila masih ada hal yang kurang di pahami silahkan tanyakan di kolom komentar.
"Special thanks for Kang Iyan"