Редактирование изображений в CSS: Фильтры

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

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

Фильтр blur

Этот фильтр применяет к изображениям гауссово размытие. Фильтр принимает значение length, которое определяет, сколько пикселей нужно смешать друг с другом. Большее значение даст большее размытие. Радиус размытия нельзя указывать в процентах. Если значение не указано, по умолчанию используется радиус 0. Синтаксис этого фильтра:

filter: blur( <length> )

Фильтр blur() не принимает отрицательных значений.

Фильтр brightness

Этот фильтр применяет к изображениям линейный множитель, делая их ярче или тусклее по сравнению с оригинальным изображением. Он принимает как числовое, так и процентное значение. При 0% вы получите полностью черное изображение, на 100% вы получите исходное изображение без каких-либо изменений. Более высокие значения приведут к более ярким изображениям. Достаточно высокое значение сделает изображение практически белым. Синтаксис этого фильтра:

filter : brightness( [ <number> | <percentage> ] )

Фильтр не принимает отрицательных значений.

Фильтр contrast

Этот фильтр изменяет контрастность изображения. Также как фильтр brightness, он принимает как число, так и процентное значение. При 0% результат будет полностью серым, значение 100% не даст никакого эффекта, значения больше 100% сделают изображение более контрастным. В фильтр contrast() нельзя передавать отрицательные значения. Синтаксис фильтра:

filter : contrast( [ <number> | <percentage> ] )

Фильтр box-shadow

Почти все уже использовали свойство box-shadow хотя бы раз. Проблема box-shadow в том, что оно применяется к блоку, с помощью него нельзя создать тень произвольной формы. Фильтр drop-shadow создает тень вокруг изображения. Это в основном размытая версия альфа-маски основного изображения. Синтаксис фильтра:

filter : drop-shadow( <length>{2,3} <color>? )

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

Фильтр grayscale

Этот фильтр делает изображение черно-белым. Значение 0% в качестве параметра не изменит изображение, значение 100% сделает его полностью черно-белым. Значение между 0% и 100% задает степень применения этого эффекта. Фильтр grayscale() не принимает отрицательных значений. Синтаксис фильтра:

filter : grayscale( [ <number> | <percentage> ] )

Фильтр hue-rotate

Фильтр применяет к изображению поворот оттенка. Параметр фильтра определяет угол на цветовом круге, на который должно быть повернуто изображение. При 0deg изображение не будет изменено, при 360deg фильтр сделает полный оборот. Синтаксис фильтра:

filter : hue-rotate( <angle> )

Фильтр invert

Фильтр инвертирует изображение. Величину инверсии определяет переданный параметр. При 0% мы получим то же изображение без изменений, при 100% — полностью инвертированное изображение, при 50% — полностью серое изображение. Любое значение между 0% и 100% будет означать степень инверсии. Фильтр не принимает отрицательных значений. Синтаксис фильтра:

filter : invert( [ <number> | <percentage> ] )

Фильтр opacity

Фильтр opacity применяет прозрачность к исходному изображени. Значение параметра 0% сделает изображение полностью прозрачным, 100% — полностью непрозрачным.

Фильтр похож на свойство opacity в CSS. Разница в том, что для фильтра некоторые браузеры могут использовать аппаратное ускорение для увеличения производительности. Синтаксис фильтра:

filter: opacity( [ <number> | <percentage> ] );

Фильтр saturate

Этот фильтр изменяет насыщенность изображения. Насыщенность задается передаваемым параметром. Фильтр не принимает отрицательные значения. При 0% (минимальное допустимое значение) изображение становится полностью не насыщенным, при 100% — получаем исходное изображение. Чтобы получить более насыщенное изображение, необходимо передать значение, большее 100%. Синтаксис:

filter : saturate( [ <number> | <percentage> ] )

Фильтр sepia

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

filter : sepia( [  |  ] )

Фильтр url

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

// The filter
<svg>
  <filter id="posterize">
    <feComponentTransfer>
      <feFuncR type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncG type="discrete" tableValues="0 0.33 0.66 0.99" />
      <feFuncB type="discrete" tableValues="0 0.33 0.66 0.99" />
    </feComponentTransfer>
  </filter>
</svg>
 
// Required CSS to apply this filter
filter: url(#posterize);

Результат применения этого фильтра:

Применение нескольких фильтров

Если вас не устраивает результат какого-то одного фильтра, вы можете комбинировать их. Порядок, в котором вы будете применять фильтры влияет на результат. Несколько фильтров к одному изображению можно применить следующим способом:

filter : sepia(0.8) contrast(2);
filter : saturate(0.5) hue-rotate(90deg) brightness(1.8);

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

В некоторые случаях разный порядок фильтров может приводить к совершенно разному результату. Например, использование sepia() после grayscale() преобразует изображение в сепию, а использование grayscale() после sepai() сделает его черно-белым.

Анимация фильтров

Свойство filter может быть анимировано. При правильном сочетании из0ображения и фильров можно добиться потрясающих результатов. Рассмотрим фрагмент кода ниже:

@keyframes day-night {
  0% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  10% {
    filter: hue-rotate(0deg) brightness(120%);
  }
  20% {
    filter: hue-rotate(0deg) brightness(150%);
  }
  90% {
    filter: hue-rotate(180deg) brightness(10%);
  }
  100% {
    filter: hue-rotate(180deg) brightness(5%);
  }
}

Я использовал фильтры hue-rotate() и brightness() вместе, чтобы добиться эффекта дня и ночи. На 20% анимации я увеличиваю яркость, оставляя оттенок без изменения, чтобы создать эффект солнечного дня. К конце анимации я поворачиваю оттенок на 180 градусов. В результате получаю синее изображение. В сочетании с очень низкой яркостью, это создает эффект ночи.

Заключение

Помимо 11-ти фильтров, о которых мы говорили выше, существует также фильтр custom(). Он позволяет создавать совершенно разные эффекты с помощью шейдеров. Есть несколько проблем с этим фильтром, которые приостановили его развитие. Компания Adobe активно работает, чтобы придумать решения этих проблем. Надеюсь, скоро фильтр custom() можно будет использовать в своих проектах.