Beranda › Blogger › Rombak Web

Cara Buat Animasi Gradasi Warna di SVG icon CSS

Wahyu Achmad Februari 10, 2020 Posting Komentar

Cara Buat Animasi Gradasi Warna di SVG icon CSS. Cara Membuat Animasi Gradasi Warna di SVG icon dengan CSS (How to Make Color Gradation Animations in SVG icon with CSS). Kesempatan kali ini saya akan memberikan tutorial Cara Membuat Animasi Gradasi Warna SVG icon dengan CSS. Saya membuat tutorial ini mungkin bisa sedikit bisa bermanfaat untuk teman – teman, mungkin bisa bermanfaat terurtama untuk para web desainer.

Icon SVG (Scalable Vector Graphics) merupakan icon yang tidak perlu memanggil script eksternal. Untuk memanggilnya hanya perlu di tulis seperti kode CSS atau HTML biasanya. Dan SVG icon juga merupakan Bahasa markup yang sanggup menampilkan icon / gambar dan support di semua browser entah itu desktop ataupun mobile.

Dibalik kelebihan ada kekurangan, menurut saya icon SVG ada kekurangannya yaitu dalam penerapan warnanya, terutama untuk warna gradient. Ada tutorialnya di Google, Namun.. sedikit lebih rumit untuk scriptnya, dan itu harus menambahakan tag lagi didalam SVG, sehingga membuat script semakin panjang.

Namun kali ini saya menemukan cara yang lebih mudah untuk penerapan warna biasa atau warna gradient untuk icon SVG, hanya menggunakan CSS tanpa tambahan tag apapun. Dan..

Perlu kalian Ingat!
~ Penerapan warna css icon SVG ini HANYA BEKERJA di dalam code :before CSS (icon SVG yang di panggil lewat CSS di :before). Contoh:

#Contoh a:before {
 background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'></path></svg>");
 ..
 ..
 ..
}

~ Penerapan warna css icon SVG ini BELUM BEKERJA untuk code inline SVG (icon SVG yang langsung di taruh ke dalam HTML). Contoh:

<html>
<body>
    ...
    <svg viewBox="0 0 24 24">
    <path d="M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z" fill="#e94c60"></path>
    </svg>
    ...
</body>
</html>

Untuk Point ke 2 di atas, Saat ini admin belum menemukan cara untuk penerapan warnanya untuk inline SVG, saya akan terus mencari cara untuk penerapan warna di inlinenya. Jadi bantu support mediaachmad untuk kedepannya, hehe.. :D

Tutorial kali ini saya akan memberikan 3 cara untuk media penerapannya.

Menggunakan warna biasa, 1 warna dan 1 hover warna.
Menggunakan warna gradient tanpa animasi
Menggunakan warna gradient dengan animasi

Oke Langsung simak tutorial dibawah ini.

Cara Membuat Animasi Gradasi Warna di SVG icon dengan CSS

Untuk code pemanggilan icon SVG masih sama seperti sebelumnya, yang di dalam :before CSS. Contoh :

kodenya

#Contoh a:before {
 background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'></path></svg>");
 ..
 ..
 ..
}

Kalian hanya perlu Merubah beberapa code nya dan menghilangkan beberapa property. Apa saja yang di rubah ? simak dibawah ini.

Sebelum

#Contoh a:before {
 background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'></path></svg>");
 ..
 ..
 ..
}

Ganti background atau background-image Menjadi -webkit-mask-image.

background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'></path></svg>");

Menjadi

-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'></path></svg>");

HAPUS property fill di dalam url CSS icon SVG.

-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000'></path></svg>");

Menjadi

-webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' ></path></svg>");

Tambahkan kode CSS background dan atur warnanya sesuka kalian. (warna icon svg di tentukan disini).

#Contoh a:before {
 -webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' ></path></svg>");
 background:#de0985;
 ..
 ..
}

Kode hasil akhir

#Contoh a:before {
 -webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' ></path></svg>");
 background:#de0985;
 ..
 ..
}

Untuk lebih lanjut simak beberapa penerapan dibawah ini.

Menggunakan warna biasa, 1 warna dan 1 hover warna.

Kodenya

#Contoh1 a:before {
 -webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' ></path></svg>");
 background:#de0985;
 margin-right: 10px;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: -5px;
    background-repeat: no-repeat!important;
    content: '';
}
#Contoh1 a:hover:before{
 background:green;
}

Hasil

Menggunakan warna gradient tanpa animasi.

Kodenya

#Contoh2 a:before {
 -webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' ></path></svg>");
 background:linear-gradient(to right, #0345ff, #2cff77);
 margin-right: 10px;
    display: inline-block;
    width: 60px;
    height: 60px;
    vertical-align: -5px;
    background-repeat: no-repeat!important;
    content: '';
}

Hasil

Menggunakan warna gradient dengan animasi

Kode CSS animasi gradient

@-webkit-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes ignielGradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

Kode

tambahakan background size, simak dibawah ini

#Contoh3 a:before {
 -webkit-mask-image:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' ></path></svg>");
 background:linear-gradient(to right, #0345ff, #2cff77);
 margin-right: 10px;
    display: inline-block;
    width: 60px;
    height: 60px;
    background-size: 500% 500%;
    vertical-align: -5px;
    background-repeat: no-repeat!important;
    content: '';
    -webkit-animation: ignielGradient 12s ease infinite;
    -moz-animation: ignielGradient 12s ease infinite;
    animation: ignielGradient 12s ease infinite;
}

Hasil

Mungkin itu yang dapat saya sampaikan tentang Cara Membuat Animasi Gradasi Warna di SVG icon dengan CSS semoga bisa sedikit bermanfaat, bantu support mediaachmad untuk update tutorial terbaru.. Sekian dan terima kasih.

Cara Buat Animasi Gradasi Warna di SVG icon CSS