Использование эффектов фильтрации

Модуль Эффектов фильтрации в CSS предоставляет свойства и функции, позволяющие применять описанные выше визуальные эффекты без использования Photoshop или отправки дополнительных запросов HTTP. Единственное необходимое программное обеспечение — это браузер пользователя. Более того, в отличие от предопределённых эффектов изображений, эффекты фильтрации CSS адаптивны и анимируемы.

Модуль эффектов фильтрации CSS предоставляет свойства filter и backdrop-filter, которые вы можете использовать для воздействия на отображение текста, изображений, фонов и границ, или любого элемента, к которому вы применяете эти свойства. Этот модуль также определяет тип данных <filter-function>, который позволяет добавлять графические эффекты, такие как размытие или сдвиг цвета. Используя функции фильтра, вы можете не только изменить внешний вид элемента, но и сослаться на фильтр SVG, используя фильтр, который вы создаёте.

Следующие два свойства фильтра модуля эффектов фильтрации CSS позволяют применять нуль, один или несколько графических эффектов к элементу:

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

• Используя свойство backdrop-filter, вы можете применять графические эффекты к области позади элемента (фону элемента). Свойство backdrop-filter часто используется, чтобы сделать содержимое переднего плана более читаемым, особенно когда большая область, на которой размещено содержимое, в противном случае не обеспечивает достаточного контраста для содержимого. Эффекты фильтров применяются только к фону элемента, а не к содержимому элемента.

Свойства filter и backdrop-filter принимают список фильтров, разделённых пробелами, которые применяются в порядке объявления.

Модуль эффектов фильтрации CSS предоставляет 10 <filter-function> функций, а также возможность определить практически бесконечное количество эффектов, используя фильтры SVG, применяемые через url() ссылку.

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

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

Максимальное значение эффекта может быть превышено. Включение значения больше, чем указанное максимальное значение, является допустимым, но оно не увеличивает эффект сверх указанного максимального значения. Другими словами, эффект на элементе будет выглядеть так же, как и при установке максимального значения эффекта. Например, установка sepia(400%) в sepia(100%) примере сепии даст тот же результат, что и sepia(100%), максимальное значение.

Значение по умолчанию — это значение, которое не создаёт эффекта. Хотя эти значения не создают эффекта, они предоставляют начальные значения интерполяции и дают пример того, как можно установить значение. Эти значения по умолчанию предоставляют шкалу между минимальным допустимым значением и максимальным значением эффекта.

Свойства filter и backdrop-filter принимают список функций фильтра, который может содержать одну или несколько <filter-function> функций, ключевое слово по умолчанию none, или фильтр SVG в качестве url() значения.

Если вы наведёте курсор на сепийное изображение ниже, вы увидите, как оно мгновенно станет полноцветным.

Изображение устанавливается в сепийный режим, задавая значение свойства filter как функцию фильтра sepia(). Фильтр удаляется при наведении :hover и :focus путём установки filter: none.

<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />

img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}

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

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

В этом примере эффект свечения добавляется с помощью фильтра drop-shadow() с размытием 3px и смещением 0.

h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}

Хотя пример с сепией filter включал только одну функцию фильтра, вы можете установить несколько фильтров. Свойства filter и backdrop-filter принимают список фильтров, разделенных пробелом, которые применяются в порядке объявления.

В этом примере применяются два фильтра — hue-rotate() и blur() — через свойство backdrop-filter. Фон, область позади элемента <p>, имеет сдвиг цвета и размытие.

.container {
  background: url(image.jpg) no-repeat left / contain goldenrod;
}
p {
  backdrop-filter: hue-rotate(240deg) blur(5px);
  background-color: rgb(255 255 255 / 10%);
  text-shadow: 2px 2px black;
}

Поскольку фильтры применяются в последовательном порядке, вы можете использовать функции фильтрации более одного раза. В этом примере фильтр drop-shadow() был использован четыре раза, каждый раз с различным значением <shadow>.

<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />

img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
img + img {
  filter: none;
}

В первом примере мандалы к линии SVG применяются четыре тени. Тот же SVG, с удалённым фильтром при помощи filter: none, включён для сравнения.

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

В этом примере, как отбрасываемая тень magenta, так и вращение цветового тона 180deg применяются к заголовку первого уровня. Пример демонстрирует эффект от применения этих фильтров в разном порядке.

h1 {
  color: midnightblue;
}
#hueFirst {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
}
#shadowFirst {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
}

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

К третьей строке не применяется эффект фильтра, чтобы показать исходный эффект для сравнения. Таким образом, третья строка остаётся midnightblue или #191970. Фильтр hue-rotate(180deg) изменяет текст в первых двух строках на #252500.

В дополнение к 10 определённым <filter-function>, эффекты CSS-фильтров поддерживают url(), в качестве параметра выступает SVG-фильтр, который может быть вставлен во внутренний или внешний SVG-файл.

Один SVG-файл может быть использован для определения нескольких фильтров, каждый с id:

<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

Фильтр id ссылается на url() для встроенных и внешних SVG:

filter: url(#blur3);
filter: url("https://example.com/svg/filters.svg#blur3");

Так же как функция фильтра blur() применяет гауссово размытие к элементам, к которым она применяется, SVG-фильтр <feGaussianBlur> также может использоваться для размытия содержимого.

В обоих случаях значение радиуса размытия, указанное как <length> в CSS и как пиксельное эквивалентное <number> в SVG, определяет значение стандартного отклонения для гауссовой функции. Другими словами, он определяет количество пикселей на экране, которые смешиваются друг с другом; большее значение создаёт большее размытие.

У <filter> атрибут stdDeviation принимает до двух значений, позволяя создавать более сложные значения размытия. Для создания эквивалентного размытия мы включаем одно значение для stdDeviation:

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

Значение фильтра SVG url() может быть включено как значение атрибута SVG <image> filter или как часть значения свойств CSS filter и backdrop-filter.

.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url(#blur);
}

• mask
• background-blend-mode, mix-blend-mode
• Эффекты CSS-фильтров
• SVG <filter> элемент, атрибут SVG filter в SVG
• Применение SVG-эффектов к HTML-содержимому