Функција 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,
која ја поставува провидноста на позадината
функцијата sepia,
која ја преобразува позадината во сепија
својството background,
кое претставува скратено својство за позадината
својството background-image,
со кое на блокот може да се зададе позадинска слика