Фильтры

Фильтры (Filters) дают возможность управлять визуальными эффектами, которые могут применяться к элементу и его дочерним элементам. Они очень полезны для создания эффектов при изменении состояния элементов. Например, при наведении курсора мыши изображение может становиться размытым или менять яркость. 

Доступны следующие типы фильтров:

Для добавления элементу фильтра:

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

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

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

Размытие (Blur)

Размывает содержимое элемента. Радиус размытия устанавливается в пикселях (px). Большее значение радиуса размытия увеличивает уровень размытия. Значение 0 не будет иметь никакого эффекта.

Яркость (Brightness)

Задает величину яркости в диапазоне от 0 до 200%. Значение 100% вернет элементу его первоначальную яркость. 

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

Определяет интенсивность цветов. Значение может составлять от 0% до 200%. Значение 100% вернет его к первоначальной насыщенности. 

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

Преобразует все цвета в оттенки серого. Значение 0% покажет исходное изображение, а 100% сделает изображение полностью в оттенках серого. 

Инверсия (Invert)

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

Сепия (Sepia)

Придает изображению винтажный желтоватый оттенок. 0% представляет исходное изображение, а 100% - полностью сепия. 

Поворот оттенка (Hue-rotate)

Изменение цвета/оттенка изображения или элемента. Единица измерения - градусы. Значение 0 или 360 возвращает его к исходному оттенку. Можно изменить оттенок одним из следующих способов: двигая точку по циферблату изменения оттенка цвета либо введя значение в градусах в поле ввода. 

При создании фильтров для разных состояний элемента рекомендуется добавлять эффект Перехода (Transition), чтобы взаимодействие было плавным. Например, добавив элементу фильтр при наведении курсора, вы получите резкое переключение эффекта при наведении. Добавьте Переход, чтобы эффект фильтра срабатывал плавно. Это можно сделать в разделы Эффекты, нажав “+” рядом с параметром Переходы (Transitions).