Редактирование изображений в 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() можно будет использовать в своих проектах.