Bermain Text Shadow CSS3

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).

Penulisan style css text-shadow seperti berikut:

text-shadow: 1px 1px 1px #555;

• 1px pada urutan pertama berarti memberi bayangan berukuran 1px ke kanan. Apabila -1px berarti memberi bayangan berukuran 1px ke kiri.
• 1px pada urutan kedua berarti memberi bayangan berukuran 1px ke atas. Apabila -1px berarti memberi bayangan berukuran 1px ke bawah.
• 1px pada urutan ketiga berarti membuat blur pada bayangan tersebut sebesar 1px.
• #555 adalah warna dari bayangan tersebut.

Berikut ini beberapa contoh dari pengembangan dari text shadow, CSS3 tersebut.

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;}

Saya menggunakan text-shadow ini pada Free Blogger Template - Smart Shadow. Anda dapat melihat template tersebut sebagai gambaran penerapan dari efek tersebut.

Kini ada fasilitas atau tools yang sangat bermanfaat untuk anda gunakan untuk memilih shadow yang tepat. Dengan Tool Text Shadow ini kita langsung mendapatkan hasil previewnya. Selain text shadow, tool ini juga ada pengembangan CSS3 lainya seperti

• Linear Gradients
• Radial Gradients
• Box Shadow
• Text Stroke
• Transforms

Sip silahkan Bermain Text Shadow CSS3.

Posted in: CSS / HTML