drop-shadow функцияси

drop-shadow функцияси фон расмига соя қўшиш имконини беради.

Синтаксис

cssселектор {
  filter: drop-shadow(x буйича силжиш, y буйича силжиш, тарқалиш радиуси, ранг);
}

Қийматлар

Қиймат	Тасниф
x буйича силжиш	Фонга нисбатан соянинг горизонтал силжиши. Мусбат сон соянинг ўнгга силжишини, манфий сон - чапга силжишини билдиради. Мажбурий параметр.
y буйича силжиш	Фонга нисбатан соянинг вертикал силжиши. Мусбат сон соянинг пастга силжишини, манфий сон - юқорига силжишини билдиради. Мажбурий параметр.
тарқалиш	Соянинг тарқалиш радиусини белгилайди. Қиймат катта бўлса, соя шунчалик кўпроқ тарқалади. Ихтиёрий параметр. Андозага кўра `0` га тенг.
ранг	Соянинг ранги. Ихтиёрий параметр. Андозага кўра соянинг қора ранги белгиланган.

Мисол

Келтирилган расмимиз учун ўқлар буйича силжишисиз, 5px тарқалишли кўк рангли сояни белгилаймиз:

html<div id="elem"></div>

css#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 функцияси,
фонга шaffофлик беради
sepia функцияси,
фонни сепияга айлантиради
background хусусияти,
фон учун қисқартирилган хусусият ҳисобланади
background-image хусусияти,
орқали блокка фон расми бериш мумкин