Funkcija drop-shadow

Funkcija drop-shadow omogućava da dodate senku pozadinskoj slici.

Sintaksa

cssselektor {
  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:

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

css#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