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

Оцените материал
(1 Голосовать)

Здравствуйте! В этой статье речь пойдет о фильтрах в 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(). К счастью, в скором времени их наработки станут доступны разработчикам, и последние смогут использовать их в своих проектах.

 

Прочитано 703 раз Последнее изменение Воскресенье, 30 октября 2016 13:52
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

TemplateMonster

Поиск по сайту

Связной трэвел

tezeks

Google+