Bayangan Teks CSS - Trik CSS

Anonim

Bayangan teks biasa:

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

Beberapa bayangan:

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 untuk warna, misalnya, transparansi putih 40%:

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