Funktionen drop-shadow
Funktionen drop-shadow giver mulighed for
at tilføje skygge til baggrunds-
billedet.
Syntaks
selektor {
filter: drop-shadow(forskydning x, forskydning y, sløringsradius, farve);
}
Værdier
| Værdi | Beskrivelse |
|---|---|
| forskydning x | Forskydning af skyggen vandret i forhold til baggrunden. Et positivt tal betyder en forskydning af skyggen til højre, negativt - til venstre. Obligatorisk parameter. |
| forskydning y | Forskydning af skyggen lodret i forhold til baggrunden. Et positivt tal betyder en forskydning af skyggen nedad, negativt - opad. Obligatorisk parameter. |
| sløring |
Sætter sløringsradius for skyggen.
Jo højere værdi, jo mere sløres skyggen.
Valgfri parameter. Som standard
0.
|
| farve | Skyggens farve. Valgfri parameter. Som standard sættes skyggens farve til sort. |
Eksempel
Lad os indstille en blå skygge for vores billede
uden forskydning langs akserne, med en sløring på 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;
}
:
Se også
-
funktionen
blur,
som slører baggrunden -
funktionen
brightness,
som indstiller lysstyrken for baggrunden -
funktionen
contrast,
som indstiller kontrasten for baggrunden -
funktionen
hue-rotate,
som indstiller farvetonen for baggrunden -
funktionen
invert,
som inverterer baggrundens farver -
funktionen
opacity,
som indstiller gennemsigtigheden for baggrunden -
funktionen
sepia,
som omdanner baggrunden til sepia -
egenskaben
background,
som er en sammentrækningsegenskab for baggrunden -
egenskaben
background-image,
som kan bruges til at tildele et baggrundsbillede til en blok