⌘K

Funkcija drop-shadow

Funkcija drop-shadow omogoča dodajanje sence k sliki ozadja.

Sintaksa

cssselektor {
  filter: drop-shadow(pomik po x, pomik po y, polmer zameglitve, barva);
}

Vrednosti

Vrednost Opis
pomik po x Premik sence vodoravno glede na ozadje. Pozitivno število pomeni pomik sence v desno, negativno - v levo. Obvezen parameter.
pomik po y Premik sence navpično glede na ozadje. Pozitivno število pomeni pomik sence navzdol, negativno - navzgor. Obvezen parameter.
zameglitev Nastavi polmer zameglitve sence. Višja kot je vrednost, bolj je senca zamegljena. Izbirni parameter. Privzeto je 0.
barva Barva sence. Izbirni parameter. Privzeto je nastavljena črna barva sence.

Primer

Nastavimo naši sliki modro senco brez pomika po oseh, z zameglitvijo 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;
}

Результат:

Glejte tudi

  • funkcija blur,
    ki zamegli ozadje
  • funkcija brightness,
    ki nastavi svetlost ozadja
  • funkcija contrast,
    ki nastavi kontrastnost ozadja
  • funkcija hue-rotate,
    ki nastavi barvni ton ozadja
  • funkcija invert,
    ki obrne barve ozadja
  • funkcija opacity,
    ki nastavi prosojnost ozadja
  • funkcija sepia,
    ki pretvori ozadje v sepijo
  • lastnost background,
    ki je okrajšava za ozadje
  • lastnost background-image,
    s katero lahko elementu nastavimo sliko ozadja
BackFunkcija contrastNextFunkcija hue-rotate