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 касиети,
бул блокко фондук сүрөттү белгилөөгө мүмкүндүк берет