Cara Merubah Background Header Viomagz Menjadi Gradasi Warna Warni Dan Animasi

sehabis sebelumnya aku membagikan sebuah artikel bagaimana memodifikasi tampilan header template viomags. selanjutnya aku akan membagikan bagaimana merubah tampilam warna pada header menjadi gradasi warna warni, nah untuk itu simak penjelasanya dibawah ini.

Daftar isi

apa itu Gradient Color
Fungsi Dan Kegunaan Gradient Color
Perbedakan Blog Menggunakan Gradient Color dan Tidak
Langkah Langkah Membuat Background Gradient Color
Kesimpulan

apa itu Gradient Color

Gradient Color yaitu teknik pencampuran warna menjadi satu bagian, maksudnya memadukan beliau warna atau lebih warna dasar RGB sehingga menjadi corak perngaruh gradasi. biasanya dalam pengodingan CSS3 penerapanya dipakai pada gradient color pada header pada template Viomags.

Fungsi Dan Kegunaan Gradient Color

dengan Gradient Color akan menciptakan tampilan menjadi lebih keren dengan menambahkan CSS gradient life yanng memiliki fungsi menampilakan warna hidup terus menerus secara otomatis di lokasi yang ditentukan.

Perbedakan Blog Menggunakan Gradient Color dan Tidak

untuk membedakan blog yang memakai Gradient warna atau tidak sangatlah mudah, biasanya yang memakai gradasi ini tampilan warnanya akan berubah ubah sedangkan untuk yang belum akan memakai warna warna dasar ataupun polos yang tidak ada adonan wana.

Langkah Langkah Membuat Background Gradient Color

buat anda yang memakai template viomags dapat nih eksklusif cobain, ingin tau eksklusif simak penerapanya dibawah ini.

1. masuk ke blogger
2. pilih tema > edit html
3. pada tab html cari instruksi <b:skin> kemudian copy instruksi dibawah ini dan pastekan dibawah <b:skin> .

#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%}}
#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%}}

4. selanjutnya cari instruksi 1 dibawah ini

#header-container { background: $(header.background.color); color: #fff; -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }

kemudian ganti instruksi 1 dengan instruksi 2 dibawah ini

#header-container { -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); box-shadow: 0 3px 10px 0 rgba(0,0,0,0.2); position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 999; }

5. simpan tema dan lihat hasilnya.

Menggunakan Gradasi Warna warni dan Animasi

buat kau yang mau memakai gradasi warna wani dengan animasi dapat coba dengan css dibawah ini dan untuk penerapasnya tidak jauh berbeda dengan sebelumnya.

CSS

.pelangiseeboy {

background: linear-gradient(45deg, #f22613, #f89406, #26a65b, #5868ec, #f54e80, #f7ca18, #d2527f);

background-size: 500% 500%;

-webkit-animation: ignielGradient 12s ease infinite;

-moz-animation: ignielGradient 12s ease infinite;

animation: ignielGradient 12s ease infinite;

}

@-webkit-keyframes seeboyGradient {

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

@-moz-keyframes seeboyGradient {

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

@keyframes seeboyGradient {

0%{background-position:0% 50%}

50%{background-position:100% 50%}

100%{background-position:0% 50%}

}

tambahkan css diatas pada pengaturan HTML blog masing masing .

1. cari instruksi <div id='header'>
2. tambahkan <div id='header' class='pelangiseeboy'>

 <div id='header'> ... </div>

 <div id='header' class='pelangiseeboy'> ... </div>

3. kalau sudah ada class, anda dapat tambahkan dibelakang class sebelumnya.

 <div id='header' class='header'> ... </div>

 <div id='header' class='header pelangiseeboy'> ... </div>

4. simpan dan lihat hasilnya

Kesimpulan

Nah, itulah Cara Merubah Background Header VioMagz Menjadi Gradasi Warna Warni Dan Animasi, biar bermanfaat dan anda dapat berkreasi dengan mengubah ngubah sesuai impian anda. kalau ada yang belum paham dapat komentar dibawah ini atau kontak admin ya guys.

Arena Flash