Bayangan Teks CSS - Trik CSS

Anonim

Bayangan teks biasa:

p ( text-shadow: 1px 1px 1px #000; )

Pelbagai bayangan:

p ( text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; )

Dua nilai pertama menentukan panjang ofset bayangan. Nilai pertama menentukan jarak mendatar dan yang kedua menentukan jarak menegak bayangan. Nilai ketiga menentukan radius kabur dan nilai terakhir menggambarkan warna bayangan:

1. nilai = Koordinat X
2. nilai = Koordinat Y
3. nilai = Jejari kabur
4. nilai = Warna bayangan

Menggunakan nombor positif sebagai dua nilai pertama berakhir dengan meletakkan bayangan di sebelah kanan teks secara mendatar (nilai pertama) dan meletakkan bayangan di bawah teks secara menegak (nilai kedua).

Nilai ketiga, radius kabur, adalah nilai pilihan yang dapat ditentukan tetapi tidak perlu. Jumlah piksel teks diregangkan yang menyebabkan kesan kabur. Sekiranya anda tidak menggunakan nilai ketiga, ia dianggap seolah-olah anda menentukan radius kabur nol.

Juga, ingat anda boleh menggunakan nilai RGBA untuk warnanya, sebagai contoh, ketelusan warna putih 40%:

p ( text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4); )