Cara Membuat Efek Warna Gradient Animasi/Berjalan- Kali ini admin akan membahas ini dan sedikit memperluas kegunaanya bagi yang tidak taukarena warna efek ini cukup dengan css dan sangat mudah jika kalian pahami dan memasangkanya pada letak hyang benar
Tujuan wana ini mungkin Agar pembaca terlihat menarik melihat text tulisan pada blog kalian dengan warna" karena hidup itu penuh wana <just!>
1#
Oke lanjut cara pertama kita membuat Block Qoutes pada post atau artikel kalian dengan efek gradient yang cantik
Untuk Cara Memasang Block Qoutes Berwarna
Masuk ke Blogger
Pilih Template > Edit HTML, Cari kode ]]></b:skin> dengan CTRL+F Untuk mempermudah pencarian lalu Tempatkan kode di bawah ini tepat di atas kode tadi
/* Material Color Box */
.warna{
overflow:hidden;
position:relative;
margin:.5rem 0 1rem;
transition:box-shadow .25s;
border-radius:2px;
color:#fff;
box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
padding:20px;
font-size:14px
}
.gradien1{
background: linear-gradient(-45deg, #eded50, #ed5084, #131735, #ce063e);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%}
}
.gradien2{
background: linear-gradient(-45deg, #d5d6e5, #131a99, #39ced6, #211f1d);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%}
}
.gradien3{
background: linear-gradient(-45deg, #eded0b, #ed530b, #382670, #3f3639);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%}
}
.gradien4{
background: linear-gradient(-45deg, #EE7752, #E73C7E, #e2dcde, #a80f42);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%}
}
.gradien5{
background: linear-gradient(-45deg, #EE7752, #3ebcad, #1a0f3d, #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%}
}
Kemudian klik postingan lalu entri baru pilih HTML, kemudian salin kode di bawah ini.<div class="gradien1"> Gue ganteng Gue Ganteng Gue ganteng </div>
<div class="gradien2"> Gue ganteng Gue Ganteng Gue ganteng </div>
<div class="gradien3"> Gue ganteng Gue Ganteng Gue ganteng </div>
<div class="gradien4"> Gue ganteng Gue Ganteng Gue ganteng </div>
<div class="gradien5"> Gue ganteng Gue Ganteng Gue ganteng </div>
Untuk demo bisa lihat dibawah ini :Contoh gradien1: Gue ganteng Gue Ganteng Gue ganteng
Contoh gradien2: Gue ganteng Gue Ganteng Gue ganteng
Contoh gradien3: Gue ganteng Gue Ganteng Gue ganteng
Contoh gradien4: Gue ganteng Gue Ganteng Gue ganteng
Contoh gradien5: Gue ganteng Gue Ganteng Gue ganteng
Untuk
seling warna gradient bisa kalian edit sendiri di CSS
2#Cara Memasang Gradient Collor Di Header
Nah untuk ini tidak ada tambahan css lagi namun kita menambahkan / memanggil css yang di atas menggunakan 'Class' Sebagai contoh Class='gradien1' gradien2 gradien3 gradien4 gradien5 , Untuk efek warna bisa di atur sendiri
Misal kita memasang di header1.Cari <div id='header'> Kalo tidak ada cari yang sama yang jelas tag utama sebuah div pada header2. Tinggal tambahkan class contoh <div id='header' class='gradien1'>
<!-- SEBELUM -->
<div id='header'>
...
</div>
<!-- SESUDAH -->
<div id='header' class='gradien1'>
...
</div>
3.Jika disana sudah ada class nya Tinggal tambahkan 'gradien1' di dalam tag Class tersebut
<!-- SEBELUM -->
<div id='header' class='header'>
...
</div>
<!-- SESUDAH -->
<div id='header' class='header gradien1'>
...
</div>
Dan jangan lupa untuk cek CSS pada #header atau .header yaitu css tujuan yang ingin diganti warnanya untuk memastikan sudah ada value backgroud sebelumnya dan jika ada hapus background tersebut karena sudah kita gantikan warna nyaSilahkan share atau berikan komentar jika ada kegagalan dan laporkan jika ada script yang tidak berfungsi sehingga admin akan memperbaharuinya.
