Cara Membuat Header Warna Gradient Seperti Arlina Design

Published by Ira Inayatul Alsa Kamis, 07 Maret 2019

Kali ini saya akan membagikan sedikit tutorial untuk bagaiamana caranya membuat header berwarna gradient seperti Arlina Design. Tutorial yang akan saya bagikan ini cukup sederhana jadi ikuti saja langkah berikut ini.

• Anda cari kode header di template anda, anda bisa menggunakan Inspect Element dengan cara klik kanan pada area header anda.

Kode header setiap template berbeda-beda

• Seperti biasa kita masuk ke menu Edit HTML
• Cari kode header tadi dan rubah kode background nya dengan kode dibawah ini.

linear-gradient(to right)

• Atau bisa juga dengan ini

linear-gradient(to left)

• Kemudian tambahkan kode dibawah ini tepat sebelum atau diatas kode </head>

<style>#header-top-menu{background: 
linear-gradient(-50deg,#ee5952,#ea3a7e,#20aadb,#23e0b3);background-size: 320% 200%;-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%}}</style>

• Ganti kode #header-top-menu dengan kode header anda.
• Klik Simpan dan lihat hasilnya.

Sekian semoga bermanfaat jika ada yang error bisa komen atau contact.