Funktsioon drop-shadow

Funktsioon drop-shadow võimaldab lisada varju tausta pildile.

Süntaks

selektor {
	filter: drop-shadow(nihke x, nihke y, hägususraadius, värv);
}

Väärtused

Väärtus	Kirjeldus
nihke x	Varju horisontaalne nihe tausta suhtes. Positiivne number tähendab varju nihutamist paremale, negatiivne - vasakule. Kohustuslik parameeter.
nihke y	Varju vertikaalne nihe tausta suhtes. Positiivne number tähendab varju nihutamist alla, negatiivne - üles. Kohustuslik parameeter.
hägusus	Määrab varju hägususraadiuse. Mida suurem on väärtus, seda rohkem varjund hägub. Valikuline parameeter. Vaikimisi võrdub `0`.
värv	Varju värv. Valikuline parameeter. Vaikimisi määratakse must varju värv.

Näide

Määrame oma pildile sinaka varju ilma telgede suunas nihuteta, hägususega 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;
}

Vaata ka

funktsioon blur,
mis hägustab tausta
funktsioon brightness,
mis määrab tausta heleduse
funktsioon contrast,
mis määrab tausta kontrastsuse
funktsioon hue-rotate,
mis määrab tausta toonivärvi
funktsioon invert,
mis inverteerib tausta värvid
funktsioon opacity,
mis määrab tausta läbipaistvuse
funktsioon sepia,
mis teisendab tausta seepia värviseks
omadus background,
mis on tausta lühendomadus
omadus background-image,
mille abil saab plokile määrata taustapildi