drop-shadow Funksie

Die funksie drop-shadow laat jou toe om 'n skaduwee by 'n agtergrondbeeld te voeg.

Sintaksis

selekteerder {
	filter: drop-shadow(verskuif op x, verskuif op y, radius van vervaaging, kleur);
}

Waardes

Waarde	Beskrywing
verskuif op x	Skaduwee se horisontale verskuiwing relatief tot die agtergrond. 'n Positiewe getal dui 'n verskuiwing na regs aan, negatief - na links. Verpligte parameter.
verskuif op y	Skaduwee se vertikale verskuiwing relatief tot die agtergrond. 'n Positiewe getal dui 'n verskuiwing afwaarts aan, negatief - opwaarts. Verpligte parameter.
vervaaging	Stel die radius van die skaduwee se vervaaging. Hoe groter die waarde, hoe meer vervaag die skaduwee. Opsionele parameter. By verstek gelyk aan `0`.
kleur	Die skaduwee se kleur. Opsionele parameter. By verstek word die skaduwee se kleur as swart gestel.

Voorbeeld

Kom ons stel vir ons beeld 'n blou skaduwee sonder verskuiwing op asse, met vervaaging 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;
}

Sien ook

funksie blur,
wat die agtergrond vervaag
funksie brightness,
wat die agtergrond se helderheid stel
funksie contrast,
wat die agtergrond se kontras stel
funksie hue-rotate,
wat die agtergrond se kleurtint stel
funksie invert,
wat die agtergrond se kleure omkeer
funksie opacity,
wat die agtergrond se deursigtigheid stel
funksie sepia,
wat die agtergrond na sepia omskakel
eienskap background,
wat 'n verkorte eienskap vir die agtergrond is
eienskap background-image,
waarmee 'n blok 'n agtergrondprent kan kry