drop-shadow ֆունկցիա

drop-shadow ֆունկցիան թույլ է տալիս ավելացնել ստվեր ֆոնային նկարին:

Սինտաքս

ընտրիչ {
	filter: drop-shadow(x-առանցքի երկայնքով տեղաշարժ, y-առանցքի երկայնքով տեղաշարժ, դիֆուզության շառավիղ, գույն);
}

Արժեքներ

Արժեք	Նկարագրություն
x-առանցքի երկայնքով տեղաշարժ	Ստվերի հորիզոնական տեղաշարժը ֆոնի նկատմամբ: Դրական թիվը նշանակում է ստվերի տեղաշարժ դեպի աջ, բացասականը՝ դեպի ձախ: Պարտադիր պարամետր:
y-առանցքի երկայնքով տեղաշարժ	Ստվերի ուղղահայաց տեղաշարժը ֆոնի նկատմամբ: Դրական թիվը նշանակում է ստվերի տեղաշարժ դեպի ներքև, բացասականը՝ դեպի վեր: Պարտադիր պարամետր:
դիֆուզության շառավիղ	Սահմանում է ստվերի դիֆուզության շառավիղը: Որքան մեծ է արժեքը, այնքան ավելի շատ է ստվերը դիֆուզվում: Ոչ պարտադիր պարամետր: Լռելյայն հավասար է `0`:
գույն	Ստվերի գույնը: Ոչ պարտադիր պարամետր: Լռելյայն սահմանվում է ստվերի սև գույն:

Օրինակ

Եկեք մեր նկարի համար սահմանենք կապտավուն ստվեր առանց առանցքների երկայնքով տեղաշարժի, 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;
}

Տես նաև

blur ֆունկցիան,
որը դիֆուզում է ֆոնը
brightness ֆունկցիան,
որը սահմանում է ֆոնի պայծառությունը
contrast ֆունկցիան,
որը սահմանում է ֆոնի կոնտրաստը
hue-rotate ֆունկցիան,
որը սահմանում է ֆոնի գունային հագեցվածությունը
invert ֆունկցիան,
որը ինվերտում է ֆոնի գույները
opacity ֆունկցիան,
որը սահմանում է ֆոնի թափանցիկությունը
sepia ֆունկցիան,
որը վերափոխում է ֆոնը սեպիայի
background հատկությունը,
որը հանդիսանում է ֆոնի համար կրճատ հատկություն
background-image հատկությունը,
որի օգնությամբ բլոկին կարելի է տալ ֆոնային նկար