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

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

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

CSS Фильтр Blur

Фильтр Blur (размытие), добавляет Гауссово размывание к вашим изображениям. Вам нужно установить значение длинны, которая будет определять, сколько пикселей будут сливаться друг с другом. Это означает, что большее значение обеспечит более размытое изображение. Имейте в виду, что вы не можете использовать проценты, для определения радиуса размытия. По умолчанию значение установлено в 0. Правильный синтаксис использования этого фильтра выглядит следующим образом:

filter: blur( <length> )

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

css фильтр blur

CSS Фильтр Brightness

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

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

Фильтр brightness() не принимает отрицательные значения.

css фильтр

CSS Фильтр Contrast

Фильтр Contrast (Контраст) изменяет контрастность изображения. Так же, как фильтр яркости, он принимает числовые и процентные значения. Значение 0% приведет к совершенно серому изображению. При значении 100% ваше изображение останется неизменным. Значения свыше 100% будут производить изображения с высокой контрастностью. Фильтр contrast() не поддерживает отрицательные значения. Правильный синтаксис использования этого фильтра выглядит следующим образом:

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

CSS Фильтр Drop-Shadow

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

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

Первые два значения длины необходимы для горизонтального и вертикального смещения тени. Третье значение <blur-radius> (радиус размытия) является необязательным. Большее значение будет создавать более легкую тень.

CSS Фильтр Grayscale

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

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

CSS Фильтр Hue-Rotate

Фильтр Hue-Rotate изменяет цветовой диапазон изображения. Параметр angle определяет количество градусов вокруг цветового круга. Со значением 0deg изображение будет неизменным. Правильный синтаксис использования этого фильтра выглядит следующим образом:

filter : hue-rotate( <angle> )
css filter hue

CSS Фильтр Invert

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

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

CSS Фильтр Opacity

Фильтр Opacity устанавливает непрозрачность для вашего изображения. Значение 0% (0% непрозрачности), приводит к полной прозрачности. Соответственно, значение 100% приводит к совершенно непрозрачному изображению.

Фильтр аналогичен CSS свойству Opacity. Единственное отличие состоит в том, что в этом случае некоторые браузеры могут использовать аппаратное ускорение для повышения производительности. Правильный синтаксис использования этого фильтра выглядит следующим образом:

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

CSS Фильтр Saturate

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

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

CSS Фильтр Sepia

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

filter : sepia( [ <number> | <percentage> ] )
css filter sepia

CSS Фильтр URL

Если вы хотите использовать свои собственные фильтры на изображениях, воспользуйтесь фильтром URL, который работает в виде XML файла c вложенным SVG фильтром. Также в нем указывается привязка к нужному элементу. Ниже приведен пример пастеризации изображения:

<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>
 
// К какому элементу применить фильтр
 
filter: url(#posterize);

Результат работы фильтра:

css filter url

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

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

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

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

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

@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() вместе, чтобы создать иллюзию дня и ночи.Исходное изображение имеет оранжевый оттенок. С каждым шагом анимации, я постепенно увеличиваю яркость. Это создает эффект солнечного дня. После этого я меняю цветовой диапазон на 180 градусов, что приводит к голубому оттенку. В сочетании с очень низкой яркостью получается эффект ночи.

Заключение

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

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

See the Pen CSS filters demo by Monty (@Shokeen) on CodePen.

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

 

Перевод статьи Editing Images in CSS: Filters

Тэги: фильтр

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.