Шпаргалка по фильтрам. CSS Filters

normal

grayscale(50%)

saturate(360%)

sepia(100%)

invert(100%)

opacity(50%)

brightness(120%)

contrast(160%)

hue-rotate(160deg)

blur(2px)

Какие фильтры доступны для использования в CSS:

grayscale(значение)
Конвертирует цвета в ч/б. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

saturate(значение)
Управляет насыщенностью цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

sepia(значение)
Создает эффект сепии. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

invert(значение)
Инвертирует цвета. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1).

opacity(значение)
Задает прозрачность элемента. Значение задается как в процентах (0% — 100%), так и в десятичных дробях (0 — 1). Данный фильтр работает так же как и CSS свойство opacity. Единственное различие в том, что фильтр поддерживает аппаратное ускорение, а свойство нет. Таким образом применение фильтра даст большую производительность.

brightness(значение)
Изменяет яркость изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

contrast(значение)
Изменяет контрастность изображения. Значение задается как в процентах (0% и больше), так и в десятичных дробях (0 и больше).

hue-rotate(угол)
Меняет цвета изображения в зависимости от заданного угла. Угол поворота определяет на сколько изменится данный цвет в цветовом круге от красного до фиолетового. Значение задается в градусах (0deg — 360deg).

blur(радиус)
Создаёт эффект размытости. Значение задается в пикселях (px).

drop-shadow(x, y, радиус, цвет)
Создает тень аналогично CSS свойству box-shadow, но только фильтр имеет поддержку аппаратного ускорения. Значения задаются аналогично значениям CSS аналога.

url(ссылка на SVG фильтр)
Можно создавать собственные фильтры с помощью SVG элемента filter и ссылаться на них из CSS. Каждый фильтр имеет свой id.

custom (coming soon)
В скором будущем станет доступна возможность создавать свои собственные фильтры с помощью CSS Shaders.

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


filter: saturate(2.7) hue-rotate(108deg);
Немного истории

Фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. Со временем интернет-браузеры были наделены поддержкой SVG и полезность фильтров стала очевидна. Robert O’Callahan из Mozilla описал идею применения SVG фильтров к элементам DOM с помощью описания их в CSS. Он создал пример в котором показал насколько проще может быть применение SVG эффектов в комбинации с CSS. Рабочие группы CSS и SVG объединились и создали новое CSS свойство filter.

Как работают фильтры

Можно представить себе некий постпроцесс, который творит чудеса с элементами на странице уже после того как они были отрисованны.

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

Производительность

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

Большинство фильтров работают довольно быстро практически на любом устройстве. Однако фильтры blur и drop-shadow, использующие эффект размытия, работают намного медленнее остальных.

Когда вы применяете фильтр blur, он смешивает цвета пикселей вокруг каждого пикселя, таким образом создавая эффект размытости. Например, если задан радиус 2px, то фильтр будет выбирать по два пикселя во всех направлениях и смешивать их цвета и так для каждого пикселя. Чем больше радиус, тем больше времени нужно на расчет эффекта. Так как фильтр выбирает пиксели во всех направлениях, то при увеличении радиуса размытости в 2 раза количество пикселей возрастёт в 4 раза. Это означает, что времени на расчёт потребуется ровно в 4 раза больше. Фильтр drop-shadow содержит в себе фильтр blur.

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

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

Комментарии ()

  1. Одиночка 06 октября 2020, 22:20 # 0
    0