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


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
  1. Untuk merubah kombinasi warna, kalian bisa gani 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 sekarangmemang design dari template kadang menjadi pengaruh juga bagi visitor sebuah website namu semua kembali lagi ke isi artikel apakah diminati para pengunjung atau tidak. Terima kasih sudah berkunjung dan semoga bermanfaat.


1Komentar

Berikanlah komentar atau kritikan yang bersifat membangun, gunakan akun Google untuk menghilangkan verifikasi komentar / mempermudah komentar.

  1. Sayangnya belum di test di template lain ya :(

    BalasHapus

Posting Komentar

Berikanlah komentar atau kritikan yang bersifat membangun, gunakan akun Google untuk menghilangkan verifikasi komentar / mempermudah komentar.

Sebelumnya Selanjutnya