Все, что нужно знать о всех 11 фильтрах CSS

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

CSS-фильтры позволяют разработчикам изменять внешний вид HTML-элемента (обычно изображения) до его отображения в браузере. Они предоставляют различные операции, которые можно выполнить над элементом, чтобы изменить его визуальные свойства — например, увеличить яркость изображения, усилить интенсивность цвета элемента, добавить эффект размытия и многое другое.

В CSS существует 11 фильтров, а именно:

  • размытие
  • яркость
  • контрастность
  • градации серого
  • поворот оттенка
  • инвертировать
  • непрозрачность
  • насыщенность
  • сепия
  • drop-shadow
  • url

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

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

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

Синтаксис:

element {
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Теперь давайте подробно рассмотрим, как работает каждый фильтр CSS.

размытие

.blurry {
    filter: blur( <length>);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Фильтр CSS blur применяет к элементу визуальный эффект размытия по Гауссу. Он принимает единицу длины CSS (px, rem, em и т.д.), чтобы определить, сколько пикселей на экране должно слиться друг с другом для получения размытого результата. Чем больше значение единицы длины CSS, переданное фильтру, тем большее размытие применяется к элементу. Если значение не указано, по умолчанию используется значение 0.

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


Фотография Fox с сайта Pexels

Код ниже добавляет эффект размытия в 3px к изображению:

img {
    filter: blur(3px);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот результат:

яркость

.exposed {
    filter: brightness( <decimal> | <percentage>);
}
Войти в полноэкранный режим Выход из полноэкранного режима

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

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

Обратите внимание, что все функции фильтра, принимающие десятичные значения, не работают с отрицательными целыми числами (например, -10), а принимают только положительные числа.

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

Приведенный ниже код применяет к изображению фильтр яркости с процентным значением 35%:

img {
    filter: brightness(35%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

Противоположный эффект возникает, если передать функции фильтра процентное или числовое значение больше 100% и 1. Он увеличивает уровень яркости изображения, чтобы оно выглядело как фотография, которая была переэкспонирована слишком большим количеством света.

Приведенный ниже код применяет к изображению фильтр яркости со значением 135%.

img {
    filter: brightness(135%);
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Результат:

контрастность

.sharpen {
    filter: contrast(<decimal> | <percentage>);
}
Войдите в полноэкранный режим Выход из полноэкранного режима

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

Он принимает процентное или десятичное значение для определения уровня контрастности изображения — значение 0 приводит к полностью серому изображению. Значения выше 100% и 1 увеличивают контрастность, а параметры ниже уменьшают контрастность изображения.

Приведенный ниже код добавляет к изображению уровень контрастности 180%:

img {
    filter: contrast(180%);       
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Результат:

шкала серого

.black-and-white {
    filter: grayscale( <decimal> | <percentage>)
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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


Иллюстрация цветовой гаммы оттенков серого

Фильтр градаций серого удаляет всю цветовую информацию из изображения и устанавливает его цвет на тон в градациях серого.

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

Приведенный ниже код использует фильтр оттенков серого, чтобы сделать изображение полностью серым:

img {
    filter: grayscale(100%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

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

hue-rotate

.change-color { 
    filter: hue-rotate(<angle> | <zero>); 
}
Войти в полноэкранный режим Выход из полноэкранного режима

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


Иллюстрация цветового круга

Каждый цвет в цветовом круге имеет свойство, называемое оттенком, — положение цвета (в угловых градусах) на круге.

Фильтр hue-rotate принимает значение угла CSS (deg, grad, rad или turn) и смещает значение оттенка каждого цвета, присутствующего в элементе, относительно указанного вами значения, обновляя все цвета относительно начальной точки их оттенка.

Например, красный цвет находится под углом 0 градусов на цветовом круге, а синий — под углом 240 градусов. Если часть изображения содержит красный цвет, передача значения 240deg фильтру hue-rotate сдвинет оттенки всех цветов изображения на 240 градусов, превратив эту часть изображения из красного в синий.

Приведенный ниже код добавляет к изображению поворот оттенка на 180 градусов:

img {
    filter: hue-rotate(180deg)
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

Обратите внимание, что идентификатор единицы измерения для фильтра hue-rotate необязателен для нулевых углов. Например, rotate(0deg) и rotate(0) действительны, а hue-rotate(45) — нет.

инвертировать

.turn-color-negative { 
    filter: invert(<decimal> | <percentage>); 
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Помните цветовое колесо, упомянутое в разделе выше? При применении к элементу или изображению фильтр CSS invert переворачивает оттенок каждого присутствующего цвета на 180 градусов, преобразуя каждый цвет в цвет, прямо противоположный ему на цветовом круге.


Иллюстрация цветового круга

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

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

Приведенный ниже код инвертирует цвета на изображении на 80%:

img {
    filter: invert(80%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

opacity

.transparent {
    filter: opacity( <decimal> | <percentage>)
}
Войти в полноэкранный режим Выход из полноэкранного режима

Фильтр opacity применяет эффект прозрачности к цветам элемента. Он принимает процентное или десятичное значение для определения степени прозрачности изображения. При непрозрачности 0% или 0 элемент будет полностью прозрачным. При непрозрачности 100% прозрачность будет отсутствовать. Установка непрозрачности между 0% и 100% придаст элементу или изображению частичную прозрачность.

Приведенный ниже код добавляет к изображению непрозрачность 35%:

img {
    filter: opacity(35%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

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

Когда вы используете фильтр непрозрачности для добавления непрозрачности элементу, браузер перегружает вычислительную задачу на графический процессор (GPU) — специализированный процессор, предназначенный для ускорения рендеринга графики в системе. Это повышает эффективность работы браузера и освобождает центральный процессор для выполнения других задач.

насытить

.enhance {
    filter: saturate(<decimal> | <percentage>);
}
Войти в полноэкранный режим Выход из полноэкранного режима

Фильтр CSS saturate усиливает или уменьшает интенсивность цвета, называемую насыщенностью, делая его более или менее ярким.

Он принимает десятичное значение от 0 до 1 или процентное значение. При значении 100% или 1 цвет остается неизменным. Значение выше 100% или 1 усиливает интенсивность цвета, делая его более ярким (насыщенным), а значения ниже этого значения уменьшают интенсивность цвета, делая его серым и тусклым (десатурированным).

Приведенный ниже код применяет к изображению насыщенность 172%:

img {
    filter: saturate(172%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

сепия

.nineties-effect {
    filter: sepia(<decimal> | <percentage>);
}
Войти в полноэкранный режим Выход из полноэкранного режима

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

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

Приведенный ниже код вызывает фильтр сепии с процентным значением 100%, преобразуя изображение в полностью сепию:

img {
    filter: sepia(100%);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

drop-shadow

.shadow {
    filter: drop-shadow(<offset-x> <offset-y> <blur-radius> <color>);
}
Войти в полноэкранный режим Выход из полноэкранного режима

Фильтр CSS drop-shadow применяет (часто размытую) фоновую тень к элементу, придавая ему более объемный вид.

Фильтр drop-shadow принимает четыре параметра при применении тени к элементу:

Вот пример установки каплевидной тени для элемента:

img {
    filter: drop-shadow(30px 30px 50px #000);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Приведенный выше код добавляет к изображению черную тень с размытием 50px, устанавливая ее на 30px правее изображения и на 30px ниже него.

Вот результат:

Фильтр drop-shadow на первый взгляд очень похож на свойство CSS box-shadow. Однако между ними есть разница, и стоит сравнить эти различия, чтобы знать, когда предпочесть одно другому.

Разница между фильтром drop-shadow и свойством box-shadow заключается в том, что фильтр drop-shadow не принимает ключевое слово inset, при установке которого тень не выравнивается за элементом, а вставляется внутрь элемента, придавая ему вид рамки.

Например:

div {
    height: 200px;
    width: 200px;
    background: #fff;
    border-radius: 20px;
    margin: 20px;
    box-shadow: inset 15px 12px 30px #000;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

Результат использования ключевого слова insert, которое доступно только для свойства box-shadow, для вставки тени в div.

Еще одно отличие между фильтром drop-shadow и свойством box-shadow заключается в том, что фильтр drop-shadow не принимает параметр — значение длины CSS, которое определяет, насколько широкой будет тень. При положительных значениях тень увеличивается, а при отрицательных — уменьшается. Если параметр не указан, то по умолчанию он будет равен 0 (тень будет того же размера, что и элемент).

Пример:

img {
    box-shadow: 30px 40px 50px 70px gray;
}
Войти в полноэкранный режим Выход из полноэкранного режима

Приведенный выше код добавляет к изображению серую тень с размытием 50px, передавая дополнительное значение длины 70px, которое означает, что тень будет на 50px больше, чем изображение по ширине.

Результат:

Наконец, чтобы объяснить существенную разницу между фильтром drop-shadow и свойством box-shadow, мы будем использовать логотип CoderPad, показанный ниже.


Логотип CoderPad

Свойство box-shadow используется для добавления тени к логотипу CoderPad выше:

.coderpad {
    box-shadow: 10px 10px 30px #000; 
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

В результате получится изображение ниже:

Заметили, что тень применяется к прямоугольной рамке вокруг логотипа? Это потому, что CSS использует модель коробки, где края элемента ограничены прямоугольной коробкой, содержащей его свойства padding, border и margin. Даже в тех случаях, когда элемент не имеет прямоугольной формы, коробка все равно присутствует, и именно к ней будет применена тень.

Фильтры CSS не привязаны к модели коробки. Это означает, что фильтр drop-shadow будет учитывать только контур логотипа CoderPad, игнорируя его боксовую модель, так что тень получит только содержимое логотипа.

Например:

.coderpad {
    filter: drop-shadow(15px 10px 28px #000);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат:

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

url

.svg-filter { 
filter: url('#selector-of-your-svg-filter-here'); 

/* you can also load filters from external SVGs this way: */ 
filter: url('filters.svg#name-of-your-other-filter-here'); 
}
Вход в полноэкранный режим Выйти из полноэкранного режима

Фильтр url принимает строковое значение, указывающее на элемент фильтра SVG, и применяет его эффекты к элементу HTML.

Элемент фильтра SVG <filter></filter> используется для добавления специальных визуальных эффектов к графике SVG.

Синтаксис:

<svg> 
    <defs> 
        <filter id="name-your-filter-here">
             ... <!-- insert filters here --> ... 
        </filter> ... 
    </defs> 
</svg>
Войти в полноэкранный режим Выйти из полноэкранного режима

Тег <filter> принимает обязательный атрибут id для идентификации фильтра. Затем мы можем использовать фильтр url для применения фильтров SVG к элементам HTML, используя либо селектор id фильтра, либо ссылку на него.

Например, приведенный ниже код определяет фильтр размытия с помощью фильтра

 <svg>
    <defs>
        <filter id="blur-filter" x="0" y="0">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
      </defs>
</svg>
Вход в полноэкранный режим Выйти из полноэкранного режима

Теперь вы можете применить фильтр SVG к элементу, передав его id в фильтр url:

img {
  filter: url("#blur-filter");
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Вот результат.

Другие замечания по использованию

Вот еще несколько моментов, на которые следует обратить внимание при использовании фильтров CSS.

Использование нескольких CSS-фильтров

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

Синтаксис:

.multiple-effects {
    filter: blur() | brightness() | contrast() | drop-shadow() | grayscale() |          hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

Например:

img {
    filter: opacity(50%) drop-shadow(20px 10px 0px black);
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Фильтр opacity стоит первым в свойстве filter в приведенном выше коде перед drop-shadow. При рендеринге изображения в браузере CSS применит к нему непрозрачность 50%, сделав его частично прозрачным, а затем добавит тень.

Вот результат:

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

img {
    filter: drop-shadow(20px 10px 0px black) opacity(50%);
}
Вход в полноэкранный режим Выход из полноэкранного режима

Результат:

Использование с ключевыми словами initial и inherit

В дополнение к 11 фильтрам CSS свойство filter принимает два дополнительных значения.

Попробуйте использовать фильтры CSS самостоятельно!

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

Фильтры CSS дают вам больше независимости от программ для редактирования фотографий при создании производственных активов и визуальных эффектов для ваших сайтов — это помогает сэкономить время и деньги. Они позволяют применять эти визуальные эффекты непосредственно в браузере.

Если вы хотите прочитать больше информативных статей из блога CoderPad, ознакомьтесь с соответствующими постами ниже:

  • Полное руководство по регулярным выражениям (Regex)
  • Правила использования React’s useEffect
  • Dev Discussions: Знакомство с Jamstack с Сальмой Алам-Нейлор из Netlify

Оцените статью
devanswers.ru
Добавить комментарий