Funkcia drop-shadow

Funkcia drop-shadow umožňuje pridať tieň k obrázku na pozadí.

Syntax

selektor {
	filter: drop-shadow(posun po x, posun po y, polomer rozostrenia, farba);
}

Hodnoty

Hodnota	Popis
posun po x	Posun tieňa v horizontálnom smere vzhľadom na pozadie. Kladné číslo znamená posun tieňa doprava, záporné - doľava. Povinný parameter.
posun po y	Posun tieňa vo vertikálnom smere vzhľadom na pozadie. Kladné číslo znamená posun tieňa nadol, záporné - nahor. Povinný parameter.
rozostrenie	Nastavuje polomer rozostrenia tieňa. Čím vyššia hodnota, tým viac sa tieň rozostrí. Voliteľný parameter. Predvolená hodnota je `0`.
farba	Farba tieňa. Voliteľný parameter. Predvolene je nastavená čierna farba tieňa.

Príklad

Nastavme nášmu obrázku modrý tieň bez posunu po osiach, s rozostrením 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;
}

Pozri tiež

funkcia blur,
ktorá rozostrie pozadie
funkcia brightness,
ktorá nastavuje jas pozadia
funkcia contrast,
ktorá nastavuje kontrast pozadia
funkcia hue-rotate,
ktorá nastavuje odtieň pozadia
funkcia invert,
ktorá invertuje farby pozadia
funkcia opacity,
ktorá nastavuje priehľadnosť pozadia
funkcia sepia,
ktorá prevedie pozadie do sépie
vlastnosť background,
ktorá je skrátenou vlastnosťou pre pozadie
vlastnosť background-image,
pomocou ktorej je možné pre blok nastaviť obrázok na pozadí