Membuat gradasi warna bergerak pada header website

Awalnya template ini saya beli dan hanya ada satu warna pada bagian header websitenya lalu secara tdak sengaja admin surfing di internet ehh ketemu dengan salah satu halaman website yang page headernya bisa ganti warna seperti punya admin ini, langsung deh saya coba utak atik sendiri dan akhirnya berhasil. cuma hanya di coba pada template Viomags saja sih
Mualtry

Awal masalah

Mualtry-Nah sobat apa kalian ingin membuat header bisa berubah warna seperti milik website admin ini, nah kali ini saya akan kasih code nya nih di bawah.

Awalnya template ini saya beli dan hanya ada satu warna  pada bagian header websitenya lalu secara tdak sengaja admin surfing di internet ehh ketemu dengan salah satu halaman website yang page headernya bisa ganti warna seperti punya admin ini, langsung deh saya coba utak atik sendiri dan akhirnya berhasil. cuma hanya di coba pada template Viomags saja sih

Step by step

Nah yuk ikutin tutorial Membuat gradasai warna bergerak pada header website :
  1. Langsung aja sobat buka settingan template dan pilih menu edit html lalu cari text/* HEADER */
  2. Lalu pastekan code di bawah ini deangan me replace code pada bagian /* HEADER */
  3. Jadi letak code di atas tag /* POST WRAPPER */
    4. #header-container { /* Wave Color */ background: #59adeb; /* Old browsers */ background: -moz-linear-gradient(-45deg, #EE7752 0%, #E73C7E 35%, #23A6D5 75%, #23D5AB 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(-45deg, #EE7752 0%, #E73C7E 35%, #23A6D5 75%, #23D5AB 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(135deg, #EE7752 0%, #E73C7E 35%, #23A6D5 75%, #23D5AB 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#EE7752', endColorstr='#23D5AB', GradientType=1); /* IE6-9 fallback on horizontal gradient */ background-size: 200% 200%; animation: waveColors 12s ease infinite; /* End Wave Color */ position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 999; height: 48px; } /* Animation Wave Color */ @-webkit-keyframes waveColors { 0% { background-position: 0% 7%; } 50% { background-position: 100% 85%; } 100% { background-position: 0% 15%; } } @keyframes waveColors { 0% { background-position: 0% 7%; } 50% { background-position: 100% 85%; } 100% { background-position: 0% 15%; } } /* End Animation Wave Color */ #header-wrapper { max-width: 1000px; margin: 0 auto; position: relative; } .header { max-width: 400px; float: left; margin-right: 28px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header h1.title, .header p.title { font: $(header.font); color: $(header.title.color); margin: 0; text-transform: uppercase; line-height: 50px; } .header .description { color: $(header.title.color); margin: -10px 0 4px 0; padding: 0; font-size: 0.7em; display: none; } .header a, .header a:hover { color: $(header.title.color); } .header img { display: block; width: auto; margin: 10px 0; max-height: 28px; } code-box
Untuk sentuhan akhir sobat dapat menerapkan perubahan warna, jumlah warna, kecepatan dll, sobat dapat melakukan eksperimen pada website sobat sendiri namun jangan lupa untuk backup data sebelum eksekusi ya buat jaga-jaga semisal ada masalah, next simak sentuhan akhir di bawah
  1. Untuk merubah kombinasi warna, kalian bisa ganti tulisan putih kode di atas pada bagian di bawah ini dengan kode warna lain yang sobat sukai.
    #EE7752 0%, #E73C7E 35%, #23A6D5 75%, #23D5AB 100%
  2. Terakhir tinggal sobat save deh, sobat bisa mengubah gradiasi warnanya sesuai dengan selera sobat.
  3. Jika ada pertanyaan bisa di tanyakan di kolom komentar dan jangan lupa share ya
Sekian tutorial cara Membuat gradasi warna bergerak pada header website, untuk zaman sekarang memang design dari template kadang menjadi pengaruh juga bagi visitor sebuah website namun semua kembali lagi ke isi artikel apakah diminati para pengunjung atau tidak. Terima kasih sudah berkunjung dan semoga bermanfaat.


Tags
Mualtry
Blog pribadi tempat belajar jaringan dan automation system, diharapkan agar bisa saling berdiskusi terhadap suatu masalah agar dapat saling membantu
Comments
Malu bertanya sesat di jalan, kepo itu perlu baik untuk diri sendiri maupun orang lain
Anonim
Comment Poster
Sayangnya belum di test di template lain ya :(
Reply to This Comment