Solusi untuk "text-decoration blink" yang tidak lagi bekerja
Jika kamu sudah cukup lama dalam aktifitas blogging, kamu tentu sudah tahu dengan fungsi dan kegunaan "text-decoration:blink".
Yah.. Element ini mampu membuat konten yang di kandung di dalamnya terlihat berkedip-kedip. Namun sayang, semakin canggih perambanan jaman sekarang, fungsi "text-decoration:blink" di tinggalkan sehingga tidak lagi bekerja.
Untuk membuat "text-decoration:blink" hidup kembali, saya punya kode CSS hasil uji coba ni!
Untuk menghadirkan efek berkedip (blink), Saya menggunakan keyframes untuk memisahkan warna dan linear infinite alternate untuk menampilkan animasinya.
Mungkin pada demo yang ada di bawah ini, warna yang saya gunakan belum atau kurang pas, tapi kamu dapat mengolahnya sendiri dengan panduan Kode Warna atau Bagan kode Warna.
Langsung saja ke demo versi sederhananya.
Contoh "text-decoration:blink" versi sederhana
Lumayankan? :p
Kode Animasinya
tag-element {
text-decoration:none;
-webkit-animation:andikaxp 0.4s linear infinite alternate;
-moz-animation:andikaxp 0.4s linear infinite alternate;
-ms-animation:andikaxp 0.4s linear infinite alternate;
-o-animation:andikaxp 0.4s linear infinite alternate;
animation:andikaxp 0.4s linear infinite alternate;
}
Ganti tag-element dengan element yang akan kamu beri efek berkedip ini.
Kode Keyframesnya
@-webkit-keyframes andikaxp {
0% {
color:red;
}
100% {
color:indigo;
}
}
@-moz-keyframes andikaxp {
0% {
color:red;
}
100% {
color:indigo;
}
}
@-ms-keyframes andikaxp {
0% {
color:red;
}
100% {
color:indigo;
}
}
@-o-keyframes andikaxp {
0% {
color:red;
}
100% {
color:indigo;
}
}
@keyframes andikaxp {
0% {
color:red;
}
100% {
color:indigo;
}
}
Jika efeknya ingin kamu terapkan ke semua link aktif yang ada pada blog, Kamu dapat menyalin semua kode yang saya tulis pada tag-element dan menerapkannya pada tag a dalam template. Contoh:
a {
text-decoration:none;
-webkit-animation:andikaxp 0.4s linear infinite alternate;
-moz-animation:andikaxp 0.4s linear infinite alternate;
-ms-animation:andikaxp 0.4s linear infinite alternate;
-o-animation:andikaxp 0.4s linear infinite alternate;
animation:andikaxp 0.4s linear infinite alternate;
}
Jika hanya ingin menerapkannya pada tag tertentu misalnya link yang ada pada tag post-body, kamu dapat mengubahnya seperti ini.
.post-body a {
text-decoration:none;
-webkit-animation:andikaxp 0.4s linear infinite alternate;
-moz-animation:andikaxp 0.4s linear infinite alternate;
-ms-animation:andikaxp 0.4s linear infinite alternate;
-o-animation:andikaxp 0.4s linear infinite alternate;
animation:andikaxp 0.4s linear infinite alternate;
}
Atau ingin menampilkannya hanya pada teks tertentu (bukan link). Contoh:
.contoh {
text-decoration:none;
-webkit-animation:andikaxp 0.4s linear infinite alternate;
-moz-animation:andikaxp 0.4s linear infinite alternate;
-ms-animation:andikaxp 0.4s linear infinite alternate;
-o-animation:andikaxp 0.4s linear infinite alternate;
animation:andikaxp 0.4s linear infinite alternate;
}
Contoh penulisan dalam mode HTMLnya
<div class="contoh">Tuliskan teks yang ingin kamu beri efek disini...</div>
Div hanya salah satu contoh tag yang bisa di gunakan. Efeknya mungkin juga akan bekerja pada tag lain seperti p, span, b, i dan lain-lainnya. Silahkan di coba!
Untuk kecepatan animasinya, saya menggunakan jeda waktu 0,4 detik (0.4s). Silahkan set sesuai keinginan.
Masih kurang?
Jika masih, ini versi yang lebih full color atau banyak warna alias pelangi.
Contoh "text-decoration:blink" versi pelangi
Kode Animasinya
tag-element {
text-decoration:none;
-webkit-animation:andika-xp 2s linear infinite alternate;
-moz-animation:andika-xp 2s linear infinite alternate;
-ms-animation:andika-xp 2s linear infinite alternate;
-o-animation:andika-xp 2s linear infinite alternate;
animation:andika-xp 2s linear infinite alternate;
}
Kode Keyframesnya
@-webkit-keyframes andika-xp {
0% {
color:red;
}
10% {
color:orange;
}
20% {
color:gold;
}
30% {
color:yellow;
}
40% {
color:yellowgreen;
}
50% {
color:green;
}
60% {
color:cyan;
}
70% {
color:blue;
}
80% {
color:violet;
}
90% {
color:magenta;
}
100% {
color:indigo;
}
}
@-moz-keyframes andika-xp {
0% {
color:red;
}
10% {
color:orange;
}
20% {
color:gold;
}
30% {
color:yellow;
}
40% {
color:yellowgreen;
}
50% {
color:green;
}
60% {
color:cyan;
}
70% {
color:blue;
}
80% {
color:violet;
}
90% {
color:magenta;
}
100% {
color:indigo;
}
}
@-ms-keyframes andika-xp {
0% {
color:red;
}
10% {
color:orange;
}
20% {
color:gold;
}
30% {
color:yellow;
}
40% {
color:yellowgreen;
}
50% {
color:green;
}
60% {
color:cyan;
}
70% {
color:blue;
}
80% {
color:violet;
}
90% {
color:magenta;
}
100% {
color:indigo;
}
}
@-o-keyframes andika-xp {
0% {
color:red;
}
10% {
color:orange;
}
20% {
color:gold;
}
30% {
color:yellow;
}
40% {
color:yellowgreen;
}
50% {
color:green;
}
60% {
color:cyan;
}
70% {
color:blue;
}
80% {
color:violet;
}
90% {
color:magenta;
}
100% {
color:indigo;
}
}
@keyframes andika-xp {
0% {
color:red;
}
10% {
color:orange;
}
20% {
color:gold;
}
30% {
color:yellow;
}
40% {
color:yellowgreen;
}
50% {
color:green;
}
60% {
color:cyan;
}
70% {
color:blue;
}
80% {
color:violet;
}
90% {
color:magenta;
}
100% {
color:indigo;
}
}
Oh iya, jika dalam pratinjau browser kamu tidak terlihat efek blinknya, ini karena saya tidak menggunakan -webkit, -moz, -ms dan -o dalam prantinjaunya. Saya lebih fokus ke pada kemampuan browser Mozilla Firefox.
Namun dari hasil yang saya coba, pratinjau efeknya tetap tampil baik pada browser Internet Explorer 11. Namun tidak pada Google Chrome. Ini karena saya tidak menambahkan selector khusus agar animasinya bisa di eksekusi di Google Chrome. Jadi jika kamu menerapkan semua kode yang telah saya tulis di atas, saya yakin efeknya mampu bekerja termasuk di Google Chrome.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.