Funkcija drop-shadow

Funkcija drop-shadow ļauj pievienot ēnu fona attēlam.

Sintakse

selektors {
	filter: drop-shadow(nobīde pa x, nobīde pa y, izplūdes rādiuss, krāsa);
}

Vērtības

Vērtība	Apraksts
nobīde pa x	Ēnas nobīde horizontāli attiecībā pret fona attēlu. Pozitīvs skaitlis nozīmē ēnas nobīdi pa labi, negatīvs - pa kreisi. Obligāts parametrs.
nobīde pa y	Ēnas nobīde vertikāli attiecībā pret fona attēlu. Pozitīvs skaitlis nozīmē ēnas nobīdi uz leju, negatīvs - uz augšu. Obligāts parametrs.
izplūde	Iestata ēnas izplūdes rādiusu. Jo lielāka vērtība, jo vairāk ēna tiek izplūdināta. Neobligāts parametrs. Pēc noklusējuma ir `0`.
krāsa	Ēnas krāsa. Neobligāts parametrs. Pēc noklusējuma tiek iestatīta melna ēnas krāsa.

Piemērs

Uzstādīsim mūsu attēlam gaiši zilu ēnu bez nobīdes pa asīm, ar izplūdi 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;
}

Skatiet arī

funkcija blur,
kas izplūdina fona attēlu
funkcija brightness,
kas iestata fona attēla spilgtumu
funkcija contrast,
kas iestata fona attēla kontrastu
funkcija hue-rotate,
kas iestata fona attēla toņu
funkcija invert,
kas invertē fona attēla krāsas
funkcija opacity,
kas iestata fona attēla caurspīdīgumu
funkcija sepia,
kas pārveido fona attēlu sepijā
īpašība background,
kas ir saīsinājuma īpašība fonam
īpašība background-image,
ar kuru blokam var piešķirt fona attēlu