В настоящее время CSS предоставляет нам возможность применять к изображениям цветовые эффекты с помощью свойства filter, такие как насыщенность (saturation), яркость (lightness) и контрастность (contrast), а также другие эффекты, которые основаны на использовании специальной функции filter.
Фильтры чаще всего используются для изображений, т.к. именно в изображениях используется масса цветов, поэтому фильтры дают очень четкий видимый эффект.
Синтаксис добавления фильтра:
|
1 2 3 |
img { filter: func(value); } |
Варианты функций для css-свойства filter
В качестве функций можно использовать следующие:
- Размытие
blur() - Непрозрачность
opacity() - Тень
drop-shadow() - Оттенки серого
grayscale() - Сепия
sepia() - Инверсия цвета
invert() - Поворот цвета
hue-rotate() - Яркость
brightness() - Контраст
contrast() - Насыщенность
saturate() url()— для SVG filters
Для каждого фильтра нужно указывать его значение в круглых скобках. Например:
|
1 2 3 |
img { filter: opacity(0.5); } |
Этот код сделает изображение прозрачным на 50%, поскольку opacity() имеет диапазон от 0 до 1 или процентное значение.
Мы также можем применить несколько фильтров в одной строке:
|
1 2 3 |
img { filter: blur(20px) grayscale(20%); } |
Рассмотрим каждый фильтр подробно. Все они представлены в этом примере, но синтаксис и единицы изменений у фильтров различаются.
See the Pen CSS Filters by Fili Santillán (@filisantillan) on CodePen.
Размытиеblur()
Фильтр blur() применяет эффект размытия к элементу. Выбранное значение определяет размер радиуса размытия. Чем выше значение, тем больше пикселей будет смешиваться, что создает большее размытие.
|
1 2 3 |
img { filter: blur(4px); } |
Значение для фильтра можно указывать в px, em илиrem.
Непрозрачность opacity()
Функция opacity() применяет прозрачность к элементу. Фильтр принимает значение от 0 до 1 или процентное значение (например, 0,5 для 50%), которое определяет прозрачность изображения. Значение 0 или 0% дает полную прозрачность элемента, а 1 или 100 % - полной непрозрачность, или другими словами, видимость элемента.
|
1 2 3 |
img { filter: opacity(0.5); } |
В CSS также существует свойство opacity (непрозрачность), которое указывается в диапазоне о 0 до 1. Однако производительность браузера выше при использовании свойства filter, поэтому этот метод является предпочтительным.
Тень drop-shadow()
Фильтр drop-shadow() добавляет тень к элементу. Он принимает до 5 параметров, первые 2 из которых являются обязательными:
- offset-x определяет горизонтальное смещение.
- offset-y определяет вертикальное смещение.
|
1 2 3 |
img { filter: drop-shadow(10px 10px); } |
- blur-radius (необязательное) определяет радиус размытия тени. По умолчанию 0 (без размытия).
|
1 2 3 |
img { filter: drop-shadow(10px 10px 2px); } |
- spread-radius (необязательное), определяет радиус распространения. Указывается в
px,remилиem.
|
1 2 3 |
img { filter: drop-shadow(10px 10px 2px 5px); } |
colour(необязательное), определяет цвет тени.
|
1 2 3 |
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% оставляет элемент без изменений.
|
1 2 3 |
img { filter: grayscale(50%); } |
Все фильтры вы можете протестировать с помощью этого примера:
See the Pen CSS Filters by Elen (@ambassador) on CodePen.
Сепия sepia()
Преобразует элемент в сепию. Опять же, значение задается в %: 100% означает полную сепию, а 0% оставляет элемент без изменений.
|
1 2 3 |
img { filter: sepia(50%); } |
Инверсия цвета invert()
Фильтр инвертирует цвета элемента. Инверсия выбирает противоположный цвет в соответствии с цветовым кругом HSL.
Значение в 100% полностью инвертирует все цвета, а значение в 0% оставляет элемент неизменным. 50% всегда будет отображать серый цвет, поскольку вы окажетесь в середине цветового круга.
|
1 2 3 |
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) является максимальным значением.
|
1 2 3 |
img { filter: hue-rotate(90deg); } |
Яркость brightness()
Фильтрbrightness() делает элемент более или менее ярким. При значении 0% элемент будет выглядеть полностью черным. 100% оставит элемент без изменений.
|
1 2 3 |
img { filter: brightness(50%); } |
Контраст contrast()
Фильтр contrast() изменяет контрастность элемента. При значении 0% элемент будет выглядеть полностью серым, а 100% оставит элемент без изменений.
|
1 2 3 |
<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().
|
1 2 3 |
img { filter: saturate(30%); } |
SVG-фильтр url()
Фильтр url() позволяет применить фильтр, определенный в файле SVG. Параметром будет местоположение файла.
|
1 2 3 |
img { filter: url(filter.svg); } |
Это работает в случае, если фильтр описан во внешнем svg-файле. Если же <svg> описан в этом же файле, то нужно указать id внутреннего элемента <filter>:
|
1 2 3 4 5 6 7 8 9 |
<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); } |
Дополнительную информацию о фильтрах 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. Задавать их элементам можно таким образом:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.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.
Облака с фильтрами и без
Анимация облаков от Papiko, к которой можно добавить фильтры.
See the Pen CPC - JavaScript Fest by Papiko (@papiko) on CodePen.
