CSS фильтры

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

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

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

img {
  filter: func(value);
}

img {

filter: func(value);

}

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

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

Размытиеblur()
Непрозрачность opacity()
Тень drop-shadow()
Оттенки серогоgrayscale()
Сепия sepia()
Инверсия цвета invert()
Поворот цвета hue-rotate()
Яркость brightness()
Контраст contrast()
Насыщенность saturate()
url() — для SVG filters

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

img {
  filter: opacity(0.5);
}

img {

filter: opacity(0.5);

}

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

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

img {
  filter: blur(20px) grayscale(20%);
}

img {

filter: blur(20px) grayscale(20%);

}

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

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

Размытие`blur()`

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

img {
  filter: blur(4px);
}

img {

filter: blur(4px);

}

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

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

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

img {
  filter: opacity(0.5);
}

img {

filter: opacity(0.5);

}

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

Тень `drop-shadow()`

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

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

img {
  filter: drop-shadow(10px 10px);
}

img {

filter: drop-shadow(10px 10px);

}

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

img {
  filter: drop-shadow(10px 10px 2px);
}

img {

filter: drop-shadow(10px 10px 2px);

}

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

img {
  filter: drop-shadow(10px 10px 2px 5px);
}

img {

filter: drop-shadow(10px 10px 2px 5px);

}

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

img {
  filter: drop-shadow(10px 10px 2px 5px rgba(0,0,0,.5));
}

img {

filter: drop-shadow(10px 10px 2px 5px rgba(0,0,0,.5));

}

Пример стилизации элементов для речи персонажей и подсказок от Josetxu. Очень приятно смотрится с использованием градиента и псевдоэлементов ::after.

See the Pen Comic Speech Bubbles - CSS by Josetxu (@josetxu) on CodePen.

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

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

img {
  filter: grayscale(50%);
}

img {

filter: grayscale(50%);

}

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

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

Сепия `sepia()`

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

img {
  filter: sepia(50%);
}

img {

filter: sepia(50%);

}

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

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

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

img {
  filter: invert(50%);
}

img {

filter: invert(50%);

}

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

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

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

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

img {
  filter: hue-rotate(90deg);
}

img {

filter: hue-rotate(90deg);

}

`Яркость brightness()`

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

img {
  filter: brightness(50%);
}

img {

filter: brightness(50%);

}

Контраст contrast()

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

<span id="edb8" class="cp lm ln hc la b bv lo lp r lq" data-selectable-paragraph="">img {
  filter: contrast(150%);
}</span>

<span id="edb8" class="cp lm ln hc la b bv lo lp r lq" data-selectable-paragraph="">img {

filter: contrast(150%);

}</span>

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

Автор Dudley Storey

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

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

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

img {
  filter: saturate(30%);
}

img {

filter: saturate(30%);

}

SVG-фильтр `url()`

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

img {
  filter: url(filter.svg);
}

img {

filter: url(filter.svg);

}

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

<svg width="500" height="500" viewBox="0 0 500 500"  id="myFilter">
  <filter id="noise" >
    <feTurbulence baseFrequency="0.3" />
 </filter>
</svg>

img {
  filter: url(#noise);
}

</filter>

</svg>

img {

filter: url(#noise);

}

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

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

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

Еще один пример интересного использования SVG-фильтра для изображений на странице. Автор Tommy Ho.

See the Pen CPChallenge - Animated SVG filter 1 by Tommy Ho (@tommyho) on CodePen.

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

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

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

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

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

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

Очень интересный генератор кода для фильтров с некоторыми стилями от Alexandre Vacassin. Используется много ползунков (<input type="range">) для настроек фильтров.

See the Pen CSS / SVG Filter Generator by Alexandre Vacassin (@alexandrevacassin) on CodePen.

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

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

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

.element {
  backdrop-filter: <filter-function> [<filter-function>]* | none
}

/* например */
.my-bg{
  backdrop-filter: blur(10px);
}

/* или  */
.bg-section{
  backdrop-filter: grayscale(0.5) hue-rotate(90deg);
}

.element {

backdrop-filter: <filter-function> [<filter-function>]* | none

}

/* например */

.my-bg{

backdrop-filter: blur(10px);

}

/* или */

.bg-section{

backdrop-filter: grayscale(0.5) hue-rotate(90deg);

}

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

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

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

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

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

Еще один пример анимации фона с применением backdrop-filter: blur() и hue-rotate(). Автор MOZZARELLA.

See the Pen Animated Hero | CSS filters by MOZZARELLA (@TheMOZZARELLA) on CodePen.

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

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

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

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

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

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

Еще один пример длинной анимации с фильтрами от EaterUsr.

See the Pen filter fest - challenge by EaterUsr (@EaterUsr) on CodePen.

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

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

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

Еще один вариант перспективы создается с помощью фильтра blur() при наведении на изображения. Одни из них как бы фокусируются, другие размываются. Автор Hayuse.

depth of field" user="dtweqbgd-the-vuer"]See the Pen [filter]depth of field by Hayuse (@dtweqbgd-the-vuer) on CodePen.

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

Автор derp

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

Картина с фильтрами и без от Zain Abbas. Нажмите кнопку внизу под деревом, чтобы отобразить панель с фильтрами.

See the Pen Interactive Filters - #MayCodePen Challenge (#codepenchallenge, #cpc-filter-fest) by Zain Abbas (@W3BUK) on CodePen.

Фотогалерея

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

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

Облака с фильтрами и без

Анимация облаков от Papiko, к которой можно добавить фильтры.

See the Pen CPC - JavaScript Fest by Papiko (@papiko) on CodePen.

CSS фильтры

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

Размытиеblur()

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

Тень drop-shadow()

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

Сепия sepia()

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

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

Яркость brightness()

Контраст contrast()

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

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

SVG-фильтр url()

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

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

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

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

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

Фотогалерея

Облака с фильтрами и без

Вам может понравиться

Стилизация и замена полей типа number

Всплывающие (модальные) окна с помощью CSS, JavaScript и jQuery

Примеры выпадающих меню (dropdown menu)

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

Размытие`blur()`

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

Тень `drop-shadow()`

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

Сепия `sepia()`

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

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

`Яркость brightness()`

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

SVG-фильтр `url()`

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