Cara Menciptakan Dampak Warna Gradient Pada Blog
Cara Membuat Efek Warna Gradient Animasi/Berjalan- Kali ini admin akan membahas ini dan sedikit memperluas kegunaanya bagi yang tidak tau
karena warna efek ini cukup dengan css dan sangat gampang jikalau kalian pahami dan memasangkanya pada letak hyang benar
Tujuan wana ini mungkin Agar pembaca terlihat menarik melihat text goresan pena pada blog kalian dengan warna" sebab hidup itu penuh wana <just!>
1#
Oke lanjut cara pertama kita menciptakan 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 aba-aba ]]></b:skin> dengan CTRL+F Untuk mempermudah pencarian kemudian Tempatkan aba-aba di bawah ini sempurna di atas aba-aba 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%} } Related
Kemudian klik postingan kemudian entri gres pilih HTML, kemudian salin aba-aba 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>Klik Publikasi
Untuk demo dapat 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
2#
Cara Memasang Gradient Collor Di Header
Nah untuk ini tidak ada perhiasan css lagi namun kita menambahkan / memanggil css yang di atas memakai 'Class' Sebagai pola Class='gradien1' gradien2 gradien3 gradien4 gradien5 , Untuk efek warna dapat di atur sendiri
Misal kita memasang di header
1.Cari <div id='header'> Kalo tidak ada cari yang sama yang terang tag utama sebuah div pada header
2. 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 ialah css tujuan yang ingin diganti warnanya untuk memastikan sudah ada value backgroud sebelumnya dan jikalau ada hapus background tersebut sebab sudah kita gantikan warna nya
Silahkan share atau berikan komentar jikalau ada kegagalan dan laporkan jikalau ada script yang tidak berfungsi sehingga admin akan memperbaharuinya.
Sumber https://www.merpatih.com/
