Hello sobat icloudZer bagaimana kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat text flash berwarna menggunakan animasi CSS
Info: Oke jika kamu sudah penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Text Flash
Apa itu text flash? flash jika di terjemahkan artinya kilat bisa juga berkilau okaylah sebenarnya nama fitur tersebut admin buat sendiri lebih tepatnya apa ya gak taulah, text flash juga bisa di terapkan pada seluruh tampilan text di dalam web, dengan beraneka macama warna sehingga membuat text flash semakin keren tentunya
Menggunakan CSS
Tampilan dari text flash tersebut sebenarnya hanya di buat menggunakan kode CSS saja tanpa ada penggunaan unsur javascript nya, jika melalui javascript memang bisa tapi agar blog semakin responsive dan cepat lebih baik gunakan kode CSS saja
Contoh Tampilan
Jika kamu penasaran dengan contoh tampilan dari text flash tersebut silahkan klik ataupun gunakan tombol di bawah ini untuk memeriksa hasil tampilan dari text flash tersebut
Info: Bagaimana sobat icloudZer dengan contoh tampilan nya keren sekali yak 😉
Cara pembuatan
Baiklah tanpa berbasa basi lagi sekarang lah saatnya admin bakalan menjabarkan mengenai text flash tersebut, jika ingin membuat nya di blogger silahkan ikuti setiap langkah demi langkah di bawah ini
- Login ke blogger menggunakan akun google milikmu
- Pergi kemenu Tema kemudian pilih menu Edit HTML, dan selanjutnya silahkan cari kode </b:skin>
- Jika sudah ketemu langsung aja salin kode CSS di bawah ini kemudian letakkan di atas kode </b:skin> tersebut
- Jika ingin menampilkan text flah berwarna tersebut gunakan kode HTML di hawah ini
- Jika di rasa sudah silahkan simpan template mu kemudian lihat bagiamana hasilnya, semoga bermanfaat
.rah-tx-flash{background:linear-gradient(330deg,#ff0000 0%,#31e400 25%,#00f7ff 50%,#7f00ff 76%,#ff0000 100%);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:animate 1.5s linear infinite}@keyframes animate{to{background-position:200% center}}
Info: Atau kamu juga bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
<span class='rah-tx-flash'>Muhammad Rahmat Uliady</span>
Info: Ingat gunakan mode HTML dalam penulisan kode, jangan menggunakan mode Compose di dalam penulisan