Свойство filter задает фильтры для элемента. CSS-фильтры позволяют применить визуальные эффекты к элементам страницы и обычно применяют к изображениям, фонам или рамкам. К CSS-фильтрам можно применять анимации и плавные переходы.
Количество фильтров влияет на скорость загрузки страницы.
Какие бывают фильтры:
brightness — яркость;
contrast — контрастность;
grayscale — бесцветность;
sepia — сепия;
invert— инверсия цвета;
saturate — цветовая насыщенность;
Для перечисленных выше фильров допустимы числовые значения от 0 до 1 или процентные значения от 0% до 100%.
hue-rotate — поворот цвета на определенный угол, значение задается в градусах от 0deg до 360deg, допускается использование отрицательного угла;
blur — эффект расфокусировки (размытость объекта), значение в пикселях от 0px;
opacity — уровень непрозрачности объекта, в процентах %;
drop-shadow — добавить тень (синтаксис аналогичен box-shadow), особенность свойства: оно применяется к непрозрачному контуру картинок, а прозрачные области игнорируются.
При использовании фильтров opacity и drop-shadow браузер может использовать аппаратное ускорение, что хорошо сказывается на производительности
Краткая запись фильтров возможна через пробел. Перечисление фильтров в разном порядке даёт разный результат. Значение по умолчанию — none.
Примеры использования фильтров:
.effect {
filter: brightness(0.5);
filter: contrast(150%);
filter: saturate(50%);
filter: grayscale(1);
filter: hue-rotate(-90deg);
filter: blur(1px) opacity(0.5);
filter: drop-shadow(10px 10px 5px #000000);
filter: drop-shadow(0px 0px 0px black) drop-shadow(0px 0px 0px black); /* двойная тень */
}