Фильтры

Подкаст CSS – 023: Фильтры

Допустим, вам нужно создать элемент со слегка непрозрачным эффектом матового стекла, который будет располагаться поверх изображения. Текст должен быть живым текстом, а не изображением. Как ты это делаешь?

Комбинация фильтров CSS и backdrop-filter позволяет нам применять эффекты и размывать то, что необходимо, в реальном времени. Размытие и непрозрачность — два из многих доступных фильтров, поэтому давайте кратко рассмотрим, что они делают и как их использовать.

Свойство filter

Поддержка браузера

  • Хром: 53.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 9.1.

Источник

Вы можете применить один или несколько из следующих фильтров в качестве значения filter . Если вы неправильно примените фильтр, остальные фильтры, определенные для filter не будут работать.

blur

Это применяет размытие по Гауссу, и единственный аргумент, который вы можете передать, — это radius , который определяет степень применяемого размытия . Это должна быть единица длины, например 10px . Проценты не принимаются.

.my-element {
    filter: blur(0.2em);
}

brightness

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Чтобы увеличить или уменьшить яркость элемента, используйте функцию яркости. Значение яркости выражается в процентах, а неизмененное изображение выражается значением 100%. Значение 0 % делает изображение полностью черным, поэтому значения от 0 % до 100 % делают изображение менее ярким. Используйте значения более 100%, чтобы увеличить яркость.

.my-element {
    filter: brightness(80%);
}

contrast

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Установите значение от 0% до 100%, чтобы уменьшить или увеличить контрастность соответственно.

.my-element {
    filter: contrast(160%);
}

grayscale

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Вы можете применить эффект полностью оттенков серого, указав 1 в качестве значения для grayscale() или 0 , чтобы получить полностью насыщенный элемент. Вы также можете использовать процентные или десятичные значения, чтобы применить только частичный эффект оттенков серого. Если вы не передадите аргументов, элемент будет полностью полутоновым. Если вы передадите значение больше 100 %, оно будет ограничено 100 %.

.my-element {
    filter: grayscale(80%);
}

invert

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Как и в случае с grayscale , вы можете передать 1 или 0 в функцию invert() , чтобы включить или выключить ее. Когда он включен, цвета элемента полностью инвертируются. Вы также можете использовать процентные или десятичные значения, чтобы применить только частичную инверсию цветов. Если вы не передадите никаких аргументов в функцию invert() , элемент будет полностью инвертирован.

.my-element {
    filter: invert(1);
}

opacity

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Фильтр opacity() работает так же, как свойство opacity : вы можете передать число или процент, чтобы увеличить или уменьшить непрозрачность. Если вы не передаете аргументы, элемент становится полностью видимым.

.my-element {
    filter: opacity(0.3);
}

saturate

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Фильтр насыщенности очень похож на фильтр brightness и принимает тот же аргумент: число или процент. Вместо увеличения или уменьшения эффекта яркости saturate увеличивает или уменьшает насыщенность цвета.

.my-element {
    filter: saturate(155%);
}

sepia

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

С помощью этого фильтра вы можете добавить эффект тона сепии, который работает как grayscale() . Тон сепии — это техника фотографической печати, которая преобразует черные тона в коричневые, чтобы сделать их более теплыми. Вы можете передать число или процент в качестве аргумента функции sepia() , которая увеличивает или уменьшает эффект. Отсутствие аргументов добавляет полный эффект сепии (эквивалент sepia(100%) ).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

На уроке цветов вы узнали о том, как оттенок в hsl связан с вращением цветового круга, и этот фильтр работает аналогичным образом. Если вы передаете угол, например градусы или повороты, он смещает оттенок всех цветов элемента, изменяя часть цветового круга, на который он ссылается. Если вы не передаете аргумент, он ничего не делает.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Поддержка браузера

  • Хром: 18.
  • Край: 12.
  • Фаерфокс: 35.
  • Сафари: 6.

Источник

Вы можете применить тень, обрамляющую кривую, как в инструменте дизайна, например в Photoshop, с помощью drop-shadow . Эта тень применяется к альфа-маске, что делает ее очень полезной для добавления тени к вырезанному изображению. Фильтр drop-shadow принимает параметр тени, который содержит разделенные пробелами значения смещения-x, смещения-y, размытия и цвета. Он почти идентичен box-shadow , но ключевое слово inset и значение распространения не поддерживаются.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Узнайте больше о различных типах теней в модуле теней .

url

Поддержка браузера

  • Хром: 5.
  • Край: 12.
  • Фаерфокс: 3.
  • Сафари: 6.

Источник

Фильтр url позволяет применить фильтр SVG к связанному элементу или файлу SVG. Подробнее о фильтрах SVG можно прочитать здесь.

Фоновый фильтр

Поддержка браузера

  • Хром: 76.
  • Край: 79.
  • Фаерфокс: 103.
  • Сафари: 18.

Источник

Свойство backdrop-filter принимает все те же значения функции фильтра, что и filter . Разница между backdrop-filter и filter заключается в том, что свойство backdrop-filter применяет фильтры только к фону, а свойство filter применяет их ко всему элементу.

Пример в самом начале этого урока является идеальным примером, поскольку вы не хотите, чтобы текст был размытым, и в идеале вам не нужно добавлять дополнительные элементы HTML. Это позволяет возможность применять фильтры только к фону.

Проверьте свое понимание

Проверьте свои знания о фильтрах

Что из перечисленного является функциями фильтра CSS?

grayscale()
🎉
invert()
🎉
flip()
Попробуйте еще раз!
multiply()
Попробуйте еще раз!
blur()
🎉
brightness()
🎉

Может ли CSS использовать фильтры SVG?

Да
Функция фильтра url() позволяет это сделать.
Нет
Попробуйте еще раз!