A text-shadow tulajdonság

A text-shadow tulajdonság szövegárnyékot állít be. Értékként a tulajdonság 4 paramétert fogad el, szóközzel elválasztva, vagy az none kulcsszót, amely teljesen megszünteti az árnyékot (ez az alapértelmezett érték).

Szintaxis

selector {
	text-shadow: eltolás_x eltolás_y elmosás szín;
}

selector {
	text-shadow: none;
}

Paraméterek

Paraméter	Leírás
eltolás x	Beállítja az árnyék eltolását az X tengely mentén. A pozitív érték jobbra, a negatív érték balra tolja.
eltolás y	Beállítja az árnyék eltolását az Y tengely mentén. A pozitív érték lefelé, a negatív érték felfelé tolja.
elmosás	Beállítja az árnyék elmosását. Minél nagyobb az érték, annál elmosódottabb lesz az árnyék. Opcionális paraméter. Ha nincs megadva, az árnyék éles lesz.
szín	Beállítja az árnyék színét bármilyen szín egységben. Opcionális paraméter. Ha nincs megadva, az árnyék színe megegyezik a szöveg színével.

Az eltolások a tengelyek mentén és az elmosás bármilyen méret egységben megadhatók, százalékos érték kivételével.

Példa

Toljuk el az árnyékot lefelé és balra, és adjunk hozzá kis elmosást:

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

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

Példa . Éles árnyék

Most állítsuk be az árnyék színét pirosra, toljuk el lefelé és balra, de vegyük el az elmosást - az árnyék éles lesz:

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

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

Példa . Egyenletes árnyék

Az árnyék most nincs eltolva, de hozzáadunk elmosást:

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

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

Lásd még

a box-shadow tulajdonság,
amely tárolóhoz állít be árnyékot