Cara Membuat Gradien Color Dengan Animasi CSS

Cara Membuat Gradien Color Dengan Animasi CSS
Kali ini saya akan share tentang Gradien Color karena banyak sekali para blogger sekarang menggunakan Gradien Color, tentu saja bagi yang belum menggerti atau awam pasti sulit untuk menerapkan CSS Gradien. Sebenarnya Gradien Color menggunakan Animation CSS yang dimana setiap warna akan berubah tentu saja kodenya mudah di ingat bila sering dipelajari oleh kalian.

Untuk menerapkan Gradien Color pada blog kalian sangat mudah, pasti jangan adanya bentrok antara Background utama dengan Background Gradien karena nanti Gradien Color tidak akan muncul, Karena itu jika ingin memasang dibagian Header pastikan kalian hapus CSS Background pada Header dulu. Baru kamu pasang Gradien Color nanti tidak akan bentrok dan bakalan Sukses seperti di blog ini.

Cara Penerapan Gradien Color


  1. Silahkan masuk ke Dashboard Blog
  2. Setelah itu Klik Template/Tema > Klik Edit HTML
  3. Nah dibagian ini cari kode #header-wrapper jika di blog saya, lalu hapus kode Background nya seperti dibawah ini
  4. #header-wrapper {
     background: #000; /* Dihapus */
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
    }
  5. Maka akan hasilnya jadi seperti ini
  6. #header-wrapper {
     max-width: 1000px;
     margin: 0 auto;
     position: relative;
    }
  7. Setelah itu kalian copy kode berikut
  8. {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%}}
  9. Jika sudah buat pemanggilan kode terlebih dahulu, misal #header-wrapper{paste kode animasinya}
  10. #header-container, #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%}}
  11. Penempatan kode dibawah <style> or <b:skin> . dibawahnya jangan diatasnya
  12. Lalu kalian Save/Simpan Template.
  13. Coba kamu lihat Tampilan nya pasti akan berubah warna
  14. Selesai 
  15. Keterangan : Pada kode diatas hapus bagian Background yang sudah saya kasih tanda /* Dihapus */

Pemanggilan kode


Pada pemanggilan kode adalah pada bagian HTML misal kan jika saya ingin memanggil kode <div class="panggil"/> maka yang harus dipanggil ada kode .panggil , kenapa pakai titik? jika kamu tahu perbedaan antara Class dan Id maka akan tahu.

Class dipanggil menggunakan tanda "Titik"
Id dipanggil menggunakan tanda "Pagar"

Lantas untuk memanggil kode pada nomor 6 yaitu seperti ini.

<div class="header-wrapper"/>
lalu buat cssnya
<style>
.header-wrapper{kode gradien}
</style>

Mudah banget bukan? yaps, untuk mengganti warna dengan warna yang kalian mau silahkan ganti pada bagian warna seperti #EE7752 dan ganti dengan warna yang mau dipakai oleh kalian. Nah itulah cara untuk membuat gradien color di blog.

Berlangganan update artikel terbaru via email:

Show comments
Hide comments

16 Responses to "Cara Membuat Gradien Color Dengan Animasi CSS"

Selin said...

menggunakan syntak

Priant Taruh said...

Maaf sebelumnya gan, mau nanya itu buat kotak HTML kaya diatas gimana ya caranya? Makasih

Must wanto said...

hehehehe . thanks gan work > mampir juga gan ke https://haxor4u.blogspot.co.id/

Selin said...

sama sama :)

Fahrozi said...

yes, berhasil.. thanks tutorialnya mas,
saya dengan kode berikut dibawah skin dgn tag style


.header-wrapper{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%}}

Selin said...

nomor 5 itu kode gradient dan nomor 6 kode yang akan dipanggil apa kalau saya #header-container nah kalau agan bisa ganti jadi #navigasi-wrapper {kode gradien nya}

Gia Anugrah said...

susah om belom paham penempatannya dari tadi ga work mulu pas penempatan no 5 dan 6. kurang paham

Selin said...

hahaha, iya yang lagi hits nya nih. Pasti nanti saya mampir :)

Gia Anugrah said...

Mantap om, ini nih yg lagi hits 😂

Mampir yaa malasberkreasi.blogspot.co.id 😁

Boyanz Blog said...

Iyya mas buat video aja

Selin said...

Pemanggilan kode itu adalah HTML nya mas, jika yang ingin dipanggil adalah Header, maka kasih pemanggilan #header-wrapper atau .header-wrapper lalu kasih kode menjadi seperti berikut #header-wrapper{kode gradien}

M. A. Obet said...

Bingung masalah kode pemanggilan BOSS

Selin said...

iya mas, nanti saya bikin videonya :)

Bawean Viral said...

Beri video mas biar ngerti

Selin said...

penempatan kode dibawah <style> or <b:skin> untuk pemanggilan harus memasukan dulu kode yang ingin dipanggil, contoh #header{kode-animasi-diatas}

Kak Yull said...

Kurang jelas mas, bagian pemanggilan kode sama penempatannya.

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ