-
Применяет эффект размытия к изображению. Большее значение будет создавать большее размытия. Если значение не указано, используется 0.
-
Регулировка яркости изображения. 0%
сделает изображение полностью черным. 100%
- дефолтное значение и представляет собой исходное изображение. Значение более 100% сделает изображение ярче.
-
Регулировка яркости изображения. 0%
сделает изображение полностью черным. 100%
- дефолтное значение и представляет собой исходное изображение. Значение более 100% сделает изображение более контрастным.
-
drop-shadow(x y размытие растяжение цвет)
Добавляет тень к элементу, аналогичен CSS свойству box-shadow. Поясним значения параметров:
x, y - обязательные значения, отвечает за смещение тени по горизонтали/вертикали относительно элемента. Положительная величина задает сдвиг тени вправо/вниз, отрицательная — влево/вверх соответственно.
размытие - третий (необязательный) параметр, задается в пикселях. Добавляет эффект размытия тени. Большее значение будет создавать большее размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0
(края тени четкие).
растяжение - необязательный параметр, измеряется в пикселях. Положительное значение заставит тень расширяться, а отрицательное - сжиматься. Если не указано, то будет 0 (тень будет иметь тот же размер, как элемент).
цвет - необязательный параметр, отвечает за цвет тени. Если не указано, цвет зависит от браузера (часто черного цвета).
В качестве примера создадим тень красного цвета, которая будет по 8 пикселей в толщину по горизонтали и по вертикали, с размытием, равным 10px:
filter: drop-shadow(8px 8px 10px red);
-
Придает картинке оттенки серого цвета. 0% (или 0) – значение по умолчанию, и оно показывает картинку без изменений. 100% (или 1) сделает картинку полностью серой (используется для черно-белых изображений). Отрицательные значения не допустимы.
-
Позволяет изменять тон, повернув его (представьте колесо цветов, которые вы поворачиваете), измеряется в градусах. 0deg
- минимальное, дефолтное значение; 360deg
- максимальное значение.
-
Создает инверсию цветов в изображении. 0% (0 – значение по умолчанию, и оно показывает картинку без изменений). 100% сделает цвета картинки полностью обратно-инвертированными. Отрицательные значения не допустимы.
-
Устанавливает уровень непрозрачности для изображения, аналогичен CSS свойству opacity. При 0%
(или 0
) изображение полностью прозрачное. 100%
(или 1
) - значение по-умолчанию, при нем изображение непрозрачно. Отрицательные значения не допустимы.
-
Насыщает изображение. 0%
(или 0
) сделает изображение полностью ненасыщенными. 100%
(или 1
) - дефолтное значение, представляет собой исходное изображение. Значение более 100% увеличиет насыщенность. Отрицательные значения не допустимы.
-
Преобразует изображение в сепию. 0%
(или 0
) - минимальное и дефолтное значение, представляющее собой исходное изображение. Максимальное значение - 100%
(или 1
).
-
Функция url() обращается к месту расположения XML-файла, который указывает SVG-фильтр, а также может прикрепляться к одному конкретному элементу фильтра. Например:
filter: url(svg-url#element-id)