Properti text-shadow

Properti text-shadow mengatur bayangan untuk teks. Sebagai nilai, properti menerima 4 parameter, yang dipisahkan oleh spasi, atau kata kunci none, yang menonaktifkan bayangan sepenuhnya (ini adalah nilai default).

Sintaksis

selector {
	text-shadow: pergeseran_x pergeseran_y blur warna;
}

selector {
	text-shadow: none;
}

Parameter

Parameter	Deskripsi
pergeseran x	Mengatur pergeseran bayangan pada sumbu X. Nilai positif menggeser ke kanan, nilai negatif - ke kiri.
pergeseran y	Mengatur pergeseran bayangan pada sumbu Y. Nilai positif menggeser ke bawah, nilai negatif - ke atas.
blur	Mengatur tingkat blur (kekaburan) bayangan. Semakin besar nilainya, semakin kabur bayangannya. Parameter opsional. Jika tidak ditentukan, bayangan akan tajam.
warna	Mengatur warna bayangan dalam satuan warna apapun. Parameter opsional. Jika tidak ditentukan, warna bayangan akan sama dengan warna teks.

Pergeseran sumbu dan blur ditentukan dalam satuan ukuran apapun, kecuali persentase.

Contoh

Mari geser bayangan ke bawah dan ke kiri dan tambahkan sedikit blur:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 5px 5px 3px black;
}

Contoh . Bayangan Tajam

Sekarang mari buat bayangan berwarna merah, geser ke bawah dan ke kiri, tetapi hilangkan blur - bayangan akan tajam:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 10px 10px red;
}

Contoh . Bayangan Seragam

Sekarang bayangan tidak digeser, tetapi blur telah ditambahkan padanya:

<div id="elem">
	Lorem ipsum dolor sit amet.
</div>

#elem {
	text-shadow: 0px 0px 3px black;
}

Lihat juga

properti box-shadow,
yang mengatur bayangan untuk kontainer