Eigenschap text-shadow

De eigenschap text-shadow geeft een schaduw aan tekst. Als waarde accepteert de eigenschap 4 parameters, gescheiden door spaties, of het sleutelwoord none, wat de schaduw volledig verwijdert (dit is de standaardwaarde).

Syntaxis

selector {
	text-shadow: verschuiving_x verschuiving_y vervaging kleur;
}

selector {
	text-shadow: none;
}

Parameters

Parameter	Beschrijving
verschuiving x	Bepaalt de verschuiving van de schaduw langs de X-as. Een positieve waarde verschuift naar rechts, een negatieve waarde - naar links.
verschuiving y	Bepaalt de verschuiving van de schaduw langs de Y-as. Een positieve waarde verschuift naar beneden, een negatieve waarde - naar boven.
vervaging	Bepaalt de vervaging van de schaduw. Hoe groter de waarde - hoe waziger de schaduw zal zijn. Optionele parameter. Indien niet opgegeven - zal de schaduw scherp zijn.
kleur	Bepaalt de kleur van de schaduw in alle eenheden voor kleur. Optionele parameter. Indien niet opgegeven - is de kleur van de schaduw hetzelfde als de tekstkleur.

Verschuivingen langs de assen en vervaging worden opgegeven in alle eenheden voor afmetingen, behalve procenten.

Voorbeeld

Laten we de schaduw naar beneden en naar links verschuiven en een beetje vervaging toevoegen:

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

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

Voorbeeld . Scherpe schaduw

Laten we nu de schaduw rood maken, hem naar beneden en naar links verschuiven, maar de vervaging verwijderen - de schaduw zal scherp zijn:

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

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

Voorbeeld . Gelijkmatige schaduw

Nu is de schaduw niet verschoven, maar er is vervaging aan toegevoegd:

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

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

Zie ook

de eigenschap box-shadow,
die een schaduw aan een container geeft