CSS-свойство filter добавляет визуальные эффекты к элементам на странице. Например, вы можете поменять цвет, яркость и насыщенность элемента, наложить размытие или изменить прозрачность, инвертировать цвета или сделать что-то ещё.
Всего фильтров девять, и вот как они работают:
К каким элементам применять свойство filter
Свойство filter можно применить к любому элементу с графическим содержимым, например, изображению, видео, тексту или форме. Однако с формами, заголовками и абзацами свойство следует использовать осторожно, оно влияет на внешний вид и читаемость текста. Например, так делать не нужно:
Значения CSS-свойства filter
Значение свойства по умолчанию — none, то есть фильтр не выбран. Чтобы добавить эффект, нужно заменить none на любое из следующих значений.
blur — размытие элемента. Указывается в пикселях: filter: blur(5px).
brightness — яркость элемента. Принимает значение от 0 до 100%. Например, filter: brightness(50%) уменьшит яркость элемента на 50%.
contrast — контрастность элемента, указывается в процентах. Например, filter: contrast(200%) увеличит контрастность элемента в два раза.
grayscale — оттенки серого. Принимает значение от 0 до 100%. Например, filter: grayscale(100%) сделает фото чёрно-белым.
hue-rotate — меняет оттенок элемента. Принимает значение в градусах. Например, filter: hue-rotate(90deg) повернёт оттенок элемента на цветовом круге на 90 градусов.
invert — инвертирует цвета элемента. Принимает значение от 0 до 100%. Например, filter: invert(90%) инвертирует цвета элемента на 90%.
opacity — прозрачность элемента. Принимает значение от 0 до 100%. Например, filter: opacity(50%) сделает элемент полупрозрачным.
saturate — насыщенность элемента. Принимает значение в процентах. Например, filter: saturate(200%) сделает цвета насыщеннее в два раза.
sepia — создаёт эффект старой фотографии. Принимает значение в процентах, например, filter: sepia(50%).
Стоит учитывать, что браузеры по-разному поддерживают фильтры, поэтому вёрстка может отличаться на разных браузерах и устройствах. Проверяйте её, тем более, это не очень сложно.
👉 Тем не менее, все браузеры поддерживают свойство filter, так что смело пользуйтесь им, но знайте меру.
Наследуется ли свойство filter
Свойство filter не наследуется от родительских элементов. Нужно явно указывать, к каким элементам на странице применить эффекты. Но если вы добавите filter форме, её поля и подписи к ним станут отображаться с добавленным эффектом.