p ( text-shadow: 1px 1px 1px #000; )Anda dapat menerapkan beberapa bayangan teks dengan memisahkan koma
p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )Dua nilai pertama menentukan panjang offset bayangan. Nilai pertama menentukan jarak horizontal dan nilai kedua menentukan jarak vertikal bayangan. Nilai ketiga menentukan radius blur dan nilai terakhir menggambarkan warna bayangan:
1. nilai = koordinat X
2. nilai = koordinat Y
3. nilai = radius blur
4. nilai = Warna bayangan
Menggunakan angka positif sebagai dua nilai pertama berakhir dengan menempatkan bayangan di sebelah kanan teks secara horizontal (nilai pertama) dan menempatkan bayangan di bawah teks secara vertikal (nilai kedua).
Nilai ketiga, radius blur, adalah nilai opsional yang dapat ditentukan tetapi tidak harus. Jumlah piksel teks yang direntangkan yang menyebabkan efek buram. Jika Anda tidak menggunakan nilai ketiga itu diperlakukan seolah-olah Anda menentukan radius buram nol.
Juga, ingat Anda dapat menggunakan nilai RGBa atau HSLa untuk warna, misalnya, transparansi putih 40%:
p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )Contoh
Lihat Contoh Bayangan Teks Kompleks Pena oleh Chris Coyier (@chriscoyier) di CodePen.
Informasi Lebih Lanjut
- Dokumen MDN
Dukungan Browser
| Chrome | Safari | Firefox | Opera | YAITU | Android | iOS |
|---|---|---|---|---|---|---|
| 2+ | 1.1+ | 3.5+ | 9,5+ | 10+ | apa saja | apa saja |