Membuat Efek Tulisan Dengan CSS Text Shadow

Dari beberapa pengembangan CSS3, property text-shadow, merupakan yang paling banyak digunakan dan sudah dapat didukung beberapa browser populer, kecuali IE . Dengan text shadow seperti namanya, text tersebut menjadi memiliki bayangan.

Kita dapat bermain dengan property text-shadow ini, baik itu membuat text terlihat timbul, tenggelam atau 3D, lewat efek bayangannya tersebut, dengan mengatur nilainya (value).

Coba Sobat pahami cara penulisan code css text-shadow di bawah ini :
text-shadow: 1px 2px 3px #555;

• 1px pada urutan pertama berarti bayangan akan tampil 1px di kanan text. Apabila pada urutan pertama ini nilainya adalah -1px, maka bayangan akan tampil 1px ke sebelah kiri dari text asli.
• 2px pada urutan kedua berarti bayangan akan tampil 2px di atas text. Apabila pada urutan kedua ini nilainya adalah -2px, maka bayangan akan tampil 2px ke sebelah bawah dari text asli.
• 3px pada urutan ketiga berarti membuat blur pada bayangan tersebut sebesar 3px (nilai negatif pada urutan ketiga ini tidak akan menghasilkan apa-apa).
• #555 adalah code warna dari bayangan yang tampil.

Setelah Sobat memahami bagaimana caranya untuk membuat text-shadow. Rhafa akan memberikan sedikit contoh untuk memperindah blog Sobat. Berikut ini beberapa contoh text-shadow yang telah dikembangan.

Contoh 1.

TEXT SHADOW CSS3 - TIMBUL

kode:
h1 {background:#FF6C17; font-size:24px; text-shadow:2px 2px 2px #A6250C; color:#FFE9C7;}


Contoh 2.

TEXT SHADOW CSS3 - TENGGELAM

kode:
h1 {background:#FF6C17; font-size:24px;text-shadow:1px 1px 1px #FF9924; color:#823210;}


Contoh 3.

TEXT SHADOW CSS3 - 3D

kode:
h1 {background:#FF6C17; font-size:24px; text-shadow:-1px -1px 1px #FF9924, 1px 1px 1px #A6250C; color:#FF6C17;}