De functie drop-shadow

De functie drop-shadow maakt het mogelijk om een schaduw toe te voegen aan een achtergrondafbeelding.

Syntaxis

selector {
	filter: drop-shadow(x-verplaatsing, y-verplaatsing, vervagingsradius, kleur);
}

Waarden

Waarde	Beschrijving
x-verplaatsing	De horizontale verschuiving van de schaduw ten opzichte van de achtergrond. Een positief getal betekent een verschuiving van de schaduw naar rechts, een negatief getal - naar links. Verplichte parameter.
y-verplaatsing	De verticale verschuiving van de schaduw ten opzichte van de achtergrond. Een positief getal betekent een verschuiving van de schaduw naar beneden, een negatief getal - naar boven. Verplichte parameter.
vervagingsradius	Stelt de vervagingsradius van de schaduw in. Hoe groter de waarde, hoe meer de schaduw vervaagt. Optionele parameter. Standaard gelijk aan `0`.
kleur	De kleur van de schaduw. Optionele parameter. Standaard wordt de schaduwkleur zwart ingesteld.

Voorbeeld

Laten we voor onze afbeelding een blauwe schaduw instellen zonder verschuiving langs de assen, met een vervaging van 5px:

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Zie ook

de functie blur,
die de achtergrond vervaagt
de functie brightness,
die de helderheid van de achtergrond instelt
de functie contrast,
die het contrast van de achtergrond instelt
de functie hue-rotate,
die de kleurtoon van de achtergrond instelt
de functie invert,
die de kleuren van de achtergrond inverteert
de functie opacity,
die de transparantie van de achtergrond instelt
de functie sepia,
die de achtergrond omzet in sepiakleur
de eigenschap background,
die een verkorte eigenschap is voor de achtergrond
de eigenschap background-image,
waarmee een blok een achtergrondafbeelding kan krijgen