Membuat efek teks dengan CSS text-shadow

Teks-shadow bukanlah properti baru di CSS3, pada kenyataannya itu diperkenalkan dalam CSS 2, namun browser telah menerapkan hal itu baru-baru ini. Seperti namanya, properti text-shadow memungkinkan untuk membuat bayangan teks. Berikut ini adalah sintaks dari text shadow (bayangan teks).

Syntax

Dalam sintaks di atas, nilai positif pertama mewakili sumbu x (horizontal) jarak di sebelah kanan teks. Sedangkan nilai negatif, jaraknya di sebelah kiri teks. Demikian pula, nilai positif kedua mewakili sumbu y (vertikal) jarak di bawah teks. Nilai negatif menciptakan jarak di atas teks. Nilai opsional ketiga adalah untuk mewakili blur radius blur. Jika tidak ada nilai blur yang ditentukan, tidak akan ada blur dalam bayangan.

Dengan CSS properti text-shadow kita dapat membuat beberapa efek teks keren yang sebelumnya adalah mungkin dengan photoshop dll Berikut adalah beberapa contoh untuk memberikan ide bagaimana kita dapat menggunakan text-shadow untuk menghias teks.

Simple Shadow

Ini adalah contoh penggunaan sederhana dari properti tekt-shadow. Ini menciptakan bayangan 2px untuk sumbu x, sumbu y dan blur radius 2px.

[sourcecode languange=”css”]
color:#7690CF;
text-shadow:2px 2px 2px #48577D;
[/sourcecode]

Engraved Style Text

[sourcecode languange=”css”]
color: #666;
text-shadow: 0px 3px 0px #666;
[/sourcecode]