CSS3 Glowing Text Effect

Oke, menindaklanjuti postingan saya yang kemarin. yang kebetulan membahas tentang cara penggunaan Text-Shadow. Kali ini saya akan membahas tutorial yang masih berhubungan dengan text shadow.

Penggunaan text shadow ternyata nggak cuma segitu aja
Kita bisa melakukan sedikit trik sehingga text kita bisa tampil lebih menarik. Salah satunya adalah Glowing Effect. Triknya cukup sederhana, kita hanya perlu menambahkan nilai bayangan lagi dan dipisahkan dengan koma . Lebih jelasnya ikuti terus ya....

Okay, to the tuts :D
Masih ingat dengan cara penggunaan syntax text-shadow yang kemarin sudah saya bahas??
Nah, untuk menerapkan trik glowing text effect ini, nilai yang kita isi hanya blur-nya saja. Nilai x-offset (horizontal) dan y-offset (vertikal) -nya kita beri nilai 0 (nol).

Get Ready Readers!!
Buat coba2 aja, kita buat kata "Teks Percobaan" lalu diberi tag <span>
Ini contohnya:

<span>Teks Percobaan</span>

Kemudian kita tambahkan text-shadow nya dengan menambahkan tag style di tag span. Kita mulai dengan warna hitam dulu ya?

<span style='text-shadow: 0px 0px 5px black;'>Teks Percobaan</span>

Teks Percobaan

Mulai keliatan??
Berikutnya, kita tinggal menambahkan nilai text-shadow lagi. Ingat, dipisah dengan koma.
Caranya, syntax text-shadow tadi, kita tambahin dengan nilai seperti berikut:

text-shadow: 0px 0px 5px black, 0px 0px 10px black;

(nilai blur kedua usahakan lebih besar dari nilai blur sebelumnya, tapi jangan terlalu jauh. Ya..kira2 jaraknya antara 2-5px lah. Ini akan membuat bayangan menyebar dengan terlihat rapi)

Teks Percobaan

Bisa ditambahin lagi

text-shadow: 0px 0px 5px black, 0px 0px 10px black, 0px 0px 15px black;

Teks Percobaan

Haha, berhasil nggak??
Sekarang mungkin keliatan jelek, berikutnya tinggal kamu yang coba cari warna sendiri. Jangan lupa sesuaikan sama background, terus warna teks samakan dengan warna bayangan (tapi kalo menurutmu lebih bagus dengan warna lain, silahkan :D ). Sisanya, tinggal kamu yang menentukan!
Oiya, nilai bayangan bisa kita tambah lagi. Sesuaikan aja ama kebutuhan kita (tapi saya belom tau, ada batas maksimumnya apa nggak. kalo ada yg tau, komen aja ya).

Nah, buat contohnya, bisa liat teks eksperimen saya berikut:

text-shadow:  #5CE4FF 0px 0px 4px, #5CE4FF 0px 0px 6px, #5CE4FF 0px 0px 10px, #5CE4FF 0px 0px 20px;

hasilnya:

TEKS EKSPERIMEN :)

Simple Glowing Text Effect

*bener2 tanpa gambar lho* hehehe

Silakan berkreasi :D Semoga berhasil !!

Kalo ada yang nggak dipahami, atau ada yang ingin share, atau ada yang mau mengoreksi tutorial diatas,
monggoooo komentarnya ya =)

<ZepT>