Properti text-shadow digunakan untuk menambahkan bayangan ke teks. Ia menerima daftar efek bayangan yang dipisahkan koma untuk diterapkan pada teks elemen.

Setiap bayangan diterapkan pada teks elemen dan semua dekorasi teksnya (digabung menjadi satu).

Bayangan diterapkan dari depan ke belakang: bayangan pertama ada di atas. Dengan demikian, bayangan dapat saling bertindihan, tetapi mereka tidak pernah menindih teks itu sendiri.

Setiap bayangan ditentukan oleh 2 hingga 3 nilai panjang (nilai ketiga adalah opsional) dan <color> opsional. Jika tidak ada warna yang ditentukan, bayangan memiliki warna tinta yang dihasilkannya. Warna dapat diatur menggunakan berbagai format <color> yang tersedia (termasuk warna RGB dan HSL). Misalnya, menggunakan warna rgba lebih menguntungkan daripada menggunakan warna heksadesimal, karena ia menambahkan dimensi lain yang bisa digunakan. Anda tidak hanya dapat mengatur posisi, blur dan warna bayangan, tetapi Kalian juga dapat mengatur opacity menggunakan nilai alpha (sama untuk warna hsla).

3 nilai panjang yang menentukan setiap bayangan adalah: offset-x (jarak horizontal), offset-y (jarak vertikal), dan “radius blur” bayangan.

Radius blur adalah opsional, jika Anda tidak menentukannya, browser menggunakan nilai radius blur default yang nol. Jika nilai blur adalah nol, tepi bayangannya tajam. Jika tidak, semakin besar nilainya, semakin banyak tepi bayangan kabur. Nilai negatif tidak diperbolehkan untuk radius blur. Cara jari-jari blur bekerja adalah bahwa nilai-nilai positif menyebabkan bentuk bayangan melebar ke semua arah oleh jari-jari yang ditentukan. Nilai negatif menyebabkan bentuk bayangan berkontraksi.

Sebaliknya, offset x dan y adalah wajib.

X-offset adalah offset horizontal bayangan. Nilai positif memindahkan bayangan ke kanan teks di sepanjang jarak yang ditentukan, panjang negatif memindahkannya ke kiri.

Y-offset adalah offset vertikal bayangan. Nilai positif memindahkan bayangan ke bagian bawah teks di sepanjang jarak yang ditentukan, nilai negatif memindahkannya ke atas.

text-shadow dapat digunakan untuk membuat beberapa efek teks yang bagus dan keren. Beberapa dapat meningkatkan keterbacaan teks, beberapa menciptakan efek tipografi yang dapat membuat desain terlihat lebih realistis, dan efek teks menarik lainnya yang rapi. Gambar berikut menunjukkan 4 dari banyak gaya yang memungkinkan yang dapat dibuat dengan teks-shadow:

Bayangan dapat membuat teks lebih mudah dibaca jika kontras antara latar depan dan latar belakangnya kecil.

Properti text-shadow juga dapat diterapkan pada elemen pseudo-line :: :: dan first-letter.

Official Syntax:

  • Syntax:

  • Berlaku untuk: Semua element

 

Values:

<color>
Optional. Dapat ditentukan sebelum atau sesudah nilai offset. Jika warna tidak ditentukan, warna yang dipilih UA akan digunakan.

Catatan: Jika kalian ingin memastikan konsistensi di seluruh browser, tentukan warna secara eksplisit.

<offset-x> <offset-y>
Wajib. Nilai-nilai <length> ini menentukan offset bayangan dari teks. <offset-x> menentukan jarak horizontal; nilai negatif menempatkan bayangan di sebelah kiri teks. <offset-y> menentukan jarak vertikal; nilai negatif menempatkan bayangan di atas teks. Jika kedua nilai 0, maka bayangan ditempatkan di belakang teks.

<blur-radius>
Pilihan. Ini adalah nilai <length>. Jika tidak ditentukan, standarnya adalah 0. Semakin tinggi nilai ini, semakin besar blur; bayangan menjadi lebih luas dan lebih terang.