Фильтры

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

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

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

Свойство filter

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

blur

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

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

brightness

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

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

contrast

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

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

grayscale

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

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

invert

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

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

opacity

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

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

saturate

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

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

sepia

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

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

hue-rotate

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

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

drop-shadow

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

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

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

url

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

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

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

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

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

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