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>

Tutorial Penggunaan Text Shadow CSS3

Coba liat Header Blog saya (Judul Blog dan Descriptionnya), mungkin biasanya orang akan menggunakan gambar untuk membuat effek teks seperti itu. Namun dengan perkembangan CSS yang saat ini begitu cepat, kita bisa mengurangi penggunaan gambar dan meminimalisir size page. Sehingga halaman situs kita tetap tampil menarik walaupun sedikit gambar.

Membuat efek teks dengan CSS3 sebenernya nggak begitu susah kok. Tips saya, dalam mempelajari syntax2 seperti HTML, CSS, sampai PHP sekalipun, kita cuma perlu teliti dan sabar. Kita harus mengenali betul karakteristik dan fungsi dari setiap baris kode. Jika kita telaten, pasti akan bisa dengan sendirinya.

Tadinya saya mau langsung ngasih tutorial tentang Glowing Text Effect atau Efek Teks Bercahaya dengan CSS3. Tapi berhubung kayaknya banyak yang belum ngerti, jadi saya terangin sedikit ya

Oke, kita mulai...
Mungkin sebelumnya anda bisa ngeliat salah satu contoh penggunaan text-shadow di blog teman saya, Johanes. Disitu juga udah disinggung sedikit mengenai pengenalan text-Shadow.

Nah, buat yg belom ngerti, saya jelasin sedikit ya...
coba liat gambar syntax text shadow berikut

[Sori ya gambarnya jelek...hehe]

Penjelasannya kira2 seperti ini:

• syntax berwarna hitam adalah perintah untuk menampilkan text shadow (bayangan teks), kemudian
• Warna merah adalah besar jarak bayangan secara horizontal, (bila nilai kita isi angka lebih dari "1", maka posisi bayangan akan semakin ke kanan. Tapi bila kita isi lebih dari "-1", maka sebaliknya, posisi bayangan akan semakin ke kiri)
• Warna biru adalah panjang jarak bayangan secara vertikal. (pengisian nilainya sama dengan yang sebelumnya. Bisa negatif, atau postitif. Bila positif posisi bayangan akan semakin ke bawah, dan bila negatif akan semakin ke atas)
• Hijau adalah tingkat blur (kekaburan bayangan). (semakin besar nilai blur, bayangan akan semakin kabur/tidak jelas. Tapi bila semakin kecil, maka bayangan akan semakin jelas/tegas)
• Dan warna ungu adalah warna bayangan. (bisa menggunakan RGB, Heksa, atau HSL. Gampangnya sih pake heksa aja)

Oke, kemudian...

1. Contoh Pertama

Kita akan membuat syntax text shadow dengan nilai sebagai berikut: text-shadow: 1px -2px 3px #000000;

hasilnya-->

text-shadow: 1px -2px 3px #000000;

Nah, bayangan yang muncul akan ke arah kanan 1pixel (horizontal), ke atas -2pixel (vertikal), dan tingkat kekaburan/blur 3pixel.

2. Memasukkan Syntax Text-Shadow ke dalam Teks

(Sebelumnya, untuk yang belum tau. Kode CSS Template Blogger normalnya ditempatkan setelah kode <b:skin><![CDATA[  dan sebelum kode </bskin> )

Misalnya kita ingin efek bayangan ditambahkan ke bagian header blog kita. Kode header title normalnya adalah "h1", jadi coba cari kode h1 tersebut di edit HTML (utk pengguna blogger). kamu akan liat kode seperti ini-->

.header h1 {syntax css...} 

[kode mungkin berbea tiap template, tapi intinya nggak beda jauh] 

Kemudian, kita tinggal memasukkan syntax text-shadow di dalam kurung kurawal tersebut. Jadinya (contoh aja)-->

.header h1 {
font-size: 40px;
font-family: arial, serif;
color: #737373;
text-shadow: 1px -2px 3px #000000;
line-height:1.2em;
letter-spacing:1px;
}

----save dan preview. hasilnya???? Oke nggak??

Lha trus, gimana kalo kita mau nambahin text shadow di  description header, atau lainnya? Nggak beda jauh kok sama cara barusan. Cuma, perhatiin kode CSSnya aja, yang mana yang mau ditambahkan text-shadow.

3. Text Shadow di Tengah-Tengah Kalimat

Nah, kalo untuk penggunaan text shadow di kata2 tertentu atau ditengah2 kalimat??

Cukup simpel kok. Kita bisa memanfaatkan kode HTML "span" di tengah2 kalimat dan masukkan syntax text-shadownya di dalam tag "style". Contoh penggunaanya=>

Sebelum

ini adalah sebuah kalimat biasa dan hanya kata ini yang diberi text shadow

Setelah

ini adalah sebuah kalimat biasa dan hanya <span style='text-shadow:1px -3px 3px #000000;'>kata ini<span> yang diberi text shadow

Hasilnya

ini adalah sebuah kalimat biasa dan hanya kata ini yang diberi text shadow

Catatan!

tag style bisa diganti dengan class, atau id. Tapi kalo dijelasin sekarang bakal lebih ribet lagi. hehehe

nanti Insyaallah akan saya jelasin sedikit di lain posting :D

Sekarang, tinggal kamu yang berkreasi!!

---

---

Silahkan dicoba sendiri ya....

kalo ada yang kurang paham atau ada penjelasan yang nggak jelas, silahkan ditanya.....

[next ----> Glowing Text Effect With CSS3]

Ditunggu komentarnya ya???

<ZepT>