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