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

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

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

Фильтр размытия

Фильтр применяет к изображению размытие по Гауссу. Необходимо указать длину, которая определяет количество взаимосмешиваемых пикселей. Чем больше значение, тем сильнее размытие. Радиус размытия нельзя задавать в процентах. Если данный параметр не задан, используется нулевое значение. Синтаксис фильтра:

filter: blur( <length> )

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

Фильтр яркости

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

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

Фильтр также не принимает отрицательные значения.

Фильтр контрастности

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

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

Фильтр падающей тени

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

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

Первые два значения length обязательны, они задают горизонтальное и вертикальное смещение тени. Третье значение <blur-radius> опциональное. Чем больше значение, тем светлее будет тень. В демо ниже показана работа этого фильтра. Если навести на пингвина курсор мыши, тень станет красной.

Фильтр оттенков серого

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

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

Фильтр поворот цвета

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

filter : hue-rotate( <angle> )

Фильтр инверсии

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

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

Фильтр прозрачности

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

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

Фильтр насыщенности

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

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

Фильтр сепии

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

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

Фильтр URL

Возникает ситуация, когда вам нужно создать свой фильтр. Фильтр url задает ссылку на XML файл с SVG фильтром. Также можно указать якорь на элемент 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>
 
// CSS код для применения фильтра
 
filter: url(#posterize);

Результат будет похож на изображение ниже:

Работа с несколькими фильтрами

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

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

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

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

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

Свойство filter можно анимировать. Правильная комбинация изображения и фильтров может дать потрясающий эффект. Взгляните на код ниже:

@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(). С помощью шейдеров данный фильтр позволяет создавать совершенно разные эффекты. У фильтра custom() есть несколько проблем, которые затормозили его развитие. Adobe активно работают над решением проблем, которые возникают при использовании фильтра custom(). К счастью, в скором времени их наработки станут доступны разработчикам, и последние смогут использовать их в своих проектах.

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

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

Редакция: Monty Shokeen

Источник: http://code.tutsplus.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree