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