В настоящее время CSS предоставляет нам возможность применять к изображениям цветовые эффекты с помощью свойства filter, такие как насыщенность (saturation), яркость (lightness) и контрастность (contrast), а также другие эффекты, которые основаны на использовании специальной функции filter.

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

Синтаксис добавления фильтра:

Варианты функций для css-свойства filter

В качестве функций можно использовать следующие:

Для каждого фильтра нужно указывать его значение в круглых скобках. Например:

Этот код сделает изображение прозрачным на 50%, поскольку opacity() имеет диапазон от 0 до 1 или процентное значение.

Мы также можем применить несколько фильтров в одной строке:

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

See the Pen CSS Filters by Fili Santillán 👾 (@filisantillan) on CodePen.0

Размытиеblur()

Фильтр blur() применяет эффект размытия к элементу. Выбранное значение определяет размер радиуса размытия. Чем выше значение, тем больше пикселей будет смешиваться, что создает большее размытие.

Значение для фильтра можно указывать  в px, em илиrem.

Непрозрачность opacity()

Функция opacity() применяет прозрачность к элементу. Фильтр принимает значение от 0 до 1 или процентное значение (например, 0,5 для 50%), которое определяет прозрачность изображения. Значение 0 или 0% дает полную прозрачность элемента, а 1 или 100 % - полной непрозрачность, или другими словами, видимость элемента.

В CSS также существует свойство opacity (непрозрачность), которое указывается в диапазоне о 0 до 1. Однако производительность браузера выше при использовании свойства filter, поэтому этот метод является предпочтительным.

Тень drop-shadow()

Фильтр drop-shadow() добавляет тень к элементу. Он принимает до 5 параметров, первые 2 из которых являются обязательными:

  • offset-x определяет горизонтальное смещение.
  • offset-y определяет вертикальное смещение.

  • blur-radius (необязательное) определяет радиус размытия тени. По умолчанию 0 (без размытия).

  • spread-radius (необязательное), определяет радиус распространения. Указывается вpx, rem или em.

  • colour (необязательное), определяет цвет тени.

Оттенки серого grayscale()

Преобразует элемент в оттенки серого. Указывается в %100% соответствует полностью оттенкам серого, а 0% оставляет элемент без изменений.

Все фильтры вы можете протестировать с помощью этого примера:

See the Pen CSS Filters by Elen (@ambassador) on CodePen.0

Сепия sepia()

Преобразует элемент в сепию. Опять же, значение задается в %: 100% означает полную сепию, а 0% оставляет элемент без изменений.

Инверсия цвета invert()

Фильтр инвертирует цвета элемента. Инверсия выбирает противоположный цвет в соответствии с цветовым кругом HSL.

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

Пример инверсии в статье.

See the Pen Simple light&dark layout using CSS filters by Costanza Focardi (@MrsTreves) on CodePen.0

Поворот цвета hue-rotate()

Цветовой круг представлен в градусах. Фильтр hue-rotate() позволяет вращать цвет, используя положительное или отрицательное вращение. Функция принимает значение в градусах. При значении 0 градусов (0deg) ничего не меняется, а значение 360 градусов (360deg) является максимальным значением.

Яркость brightness()

Фильтрbrightness() делает элемент более или менее ярким. При значении 0% элемент будет выглядеть полностью черным. 100% оставит элемент без изменений.

Контраст contrast()

Фильтр contrast()  изменяет контрастность элемента. При значении 0% элемент будет выглядеть полностью серым, а 100% оставит элемент без изменений.

Пример использования контраста

Автор Dudley Storey 

See the Pen Text Image Mosaic by Dudley Storey (@dudleystorey)on CodePen.0

Насыщенность saturate()

Фильтр saturate() изменяет насыщенность элемента. При значение 0% элемент является полностью ненасыщенным (т.е. будет полностью в оттенках серого). Значение 100% оставляет элемент неизменным. Этот фильтр по действию напоминает grayscale().

SVG-фильтр url()

Фильтр url() позволяет применить фильтр, определенный в файле SVG. Параметром будет местоположение файла.

Это работает в случае, если фильтр описан во внешнем svg-файле. Если же <svg> описан в этом же файле, то нужно указать id внутреннего элемента <filter>:

Дополнительную информацию о фильтрах SVG можно посмотреть в статьях:

Пример использования CSS-фильтра url():

See the Pen Text Morph by Valgo (@Valgo) on CodePen.0

Генераторы CSS-фильтров

Можно также воспользоваться примерами ниже,

Здесь можно скопировать сразу несколько CSS-cвойств:

See the Pen CSS Filters by Elen (@ambassador) on CodePen.0

Протестируйте каждое свойство в отдельности или в сочетании с другими.

See the Pen CSS Filters by Andreas Wik (@andreaswik) on CodePen.0

CSS-свойство backdrop-filter

Кроме свойства filter можно применить еще одно свойство - backdrop-filter. Разница между ними заключается в том, что свойство backdrop-filter применяют к фоновому изображению, а не к тегу <img>, как в примерах выше.

Значения backdrop-filter такие же, как и для filter. Задавать их элементам можно таким образом:

В качестве примера можно посмотреть, как с помощью свойства backdrop-filter можно "поменять день на ночь" (автор Jordan):

See the Pen Time sensitive background - #CodePenChallenge: filters by Jordan (@DeyJordan) on CodePen.0

И от того же автора пример использования одного или нескольких фильтров:

See the Pen Demo Backdrop Filters by Elen (@ambassador) on CodePen.0

Также ві можете посмотреть, как применять это свойство для создания эффекта размытого стекла.

Практические примеры использования css-фильтров

Анимация фона с использованием фильтров от LM

See the Pen Multiple CSS filters and gradient by LM (@LMG)on CodePen.0

Пример анимации с использованием фильтров

В этом примере фильтр blur() дает отличный результат фокусировки на разных объектах. Автор Enger Bewza.

See the Pen #Codevember - Day 21 - Fight by Enger Bewza (@enger) on CodePen.0

Перспектива при прокручивании

Фильтр blur() здесь работает также на создание эффекта перспективы

See the Pen scrollable CSS Depth of Field by Gaston Gougeon (@Glabill)on CodePen.0

Сравнение картинок с фильтрами и без

Автор derp

See the Pen Compare Images by derp (@t_herper) on CodePen.0

Фотогалерея

Галерея изображений в серых тонах, основанная на css-grid. При наведении цвет "возвращается". Автор Teodora

See the Pen Hover me 😊 Photo gallery (responsive grid, CSS filters) by Teodora (@teodorachiosa) on CodePen.0

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *