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