drop-shadow-funktio

drop-shadow-funktio mahdollistaa varjon lisäämisen taustakuvaan.

Syntaksi

valitsija {
	filter: drop-shadow(siirto x-akselilla, siirto y-akselilla, sumeus, väri);
}

Arvot

Arvo	Kuvaus
siirto x-akselilla	Varjon siirtymä vaakasuunnassa taustaan nähden. Positiivinen luku tarkoittaa varjon siirtymistä oikealle, negatiivinen - vasemmalle. Pakollinen parametri.
siirto y-akselilla	Varjon siirtymä pystysuunnassa taustaan nähden. Positiivinen luku tarkoittaa varjon siirtymistä alaspäin, negatiivinen - ylöspäin. Pakollinen parametri.
sumeus	Asettaa varjon sumeusasteen. Mitä suurempi arvo, sitä sumeampi varjo on. Valinnainen parametri. Oletusarvoisesti `0`.
väri	Varjon väri. Valinnainen parametri. Oletusarvoisesti asetetaan musta varjon väri.

Esimerkki

Asetetaan kuvallemme sinertävä varjo ilman siirtoa akseleilla, sumeudella 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;
}

Katso myös

funktio blur,
joka sumuttaa taustan
funktio brightness,
joka asettaa taustan kirkkauden
funktio contrast,
joka asettaa taustan kontrastin
funktio hue-rotate,
joka asettaa taustan värisävykierron
funktio invert,
joka kääntää taustan värit
funktio opacity,
joka asettaa taustan läpinäkyvyyden
funktio sepia,
joka muuntaa taustan sepiaksi
ominaisuus background,
joka on taustan lyhennysominaisuus
ominaisuus background-image,
jolla elementille voidaan asettaa taustakuva