Funkcija drop-shadow
Funkcija drop-shadow omogućava
da dodate senku pozadinskoj
slici.
Sintaksa
selektor {
filter: drop-shadow(pomeraj po x, pomeraj po y, radius zamućenja, boja);
}
Vrednosti
| Vrednost | Opis |
|---|---|
| pomeraj po x | Pomeranje senke po horizontali u odnosu na pozadinu. Pozitivan broj označava pomeranje senke udesno, negativan - ulevo. Obavezan parametar. |
| pomeraj po y | Pomeranje senke po vertikali u odnosu na pozadinu. Pozitivan broj označava pomeranje senke nadole, negativan - nagore. Obavezan parametar. |
| zamućenje |
Postavlja radius zamućenja senke.
Što je vrednost veća, to se senka više zamućuje.
Opcioni parametar. Podrazumevano
jednako 0.
|
| boja | Boja senke. Opcioni parametar. Podrazumevano se postavlja crna boja senke. |
Primer
Hajde da postavimo za našu sliku plavu senku
bez pomeranja po osama, sa zamućenjem od 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;
}
:
Vidite takođe
-
funkcija
blur,
koja zamućuje pozadinu -
funkcija
brightness,
koja zadaje svetlinu pozadini -
funkcija
contrast,
koja zadaje kontrastnost pozadini -
funkcija
hue-rotate,
koja zadaje nijansu boje pozadini -
funkcija
invert,
koja invertuje boje pozadine -
funkcija
opacity,
koja zadaje providnost pozadini -
funkcija
sepia,
koja transformiše pozadinu u sepiju -
svojstvo
background,
koje predstavlja skraćenicu za pozadinu -
svojstvo
background-image,
pomoću koga bloku možete zadati pozadinsku sliku