От автора: представьте ситуацию: вам нужно сделать копию изображения с вашего сайта, но с большей контрастностью, размытием или яркостью. До появления CSS фильтров вам оставалось или загружать несколько версий изображения, или манипулировать ими при помощи JavaScript. Если вы не хотите сами возиться с изображениями, вам помогут CSS фильтры. Давайте начнем этот урок с краткого обсуждения всех фильтров.
Фильтр размытия
Фильтр применяет к изображению размытие по Гауссу. Необходимо указать длину, которая определяет количество взаимосмешиваемых пикселей. Чем больше значение, тем сильнее размытие. Радиус размытия нельзя задавать в процентах. Если данный параметр не задан, используется нулевое значение. Синтаксис фильтра:
|
1 |
filter: blur( <length> ) |
Фильтр blur() не принимает отрицательные значения.
Фильтр яркости
Фильтр применяет к изображениям линейный множитель, делая их ярче или темнее. Принимаются числа и проценты. Со значением 0% вы получите полностью черное изображение, а 100% даст оригинал. Значения выше 100% осветляют изображение. Достаточно большое значение сделает изображение полностью белым. Синтаксис фильтра:
|
1 |
filter : brightness( [ <number> | <percentage> ] ) |
Фильтр также не принимает отрицательные значения.
Фильтр контрастности
Фильтр изменяет контраст изображений. Как и в фильтре яркости, тут принимаются числа и проценты. 0% даст полностью серое изображение, 100% даст нам оригинал, а значения выше 100% увеличивают контрастность. В фильтре contrast() нельзя использовать отрицательные значения. Синтаксис фильтра:
|
1 |
filter : contrast( [ <number> | <percentage> ] ) |
Фильтр падающей тени
Почти каждый из вас хоть раз использовал свойство box-shadow. Свойство применяется к блокам, в этом его главная проблема. Свойство нельзя использовать на необычных формах. Однако фильтр drop-shadow создает тень по границам изображения. Фильтр представляет собой размытую версию альфа маски самого изображения. Синтаксис drop-shadow:
|
1 |
filter : drop-shadow( <length>{2,3} <color>? ) |
Первые два значения length обязательны, они задают горизонтальное и вертикальное смещение тени. Третье значение <blur-radius> опциональное. Чем больше значение, тем светлее будет тень. В демо ниже показана работа этого фильтра. Если навести на пингвина курсор мыши, тень станет красной.
Фильтр оттенков серого
Фильтр делает изображения черно-белыми. 0% даст нам оригинал, а 100% превратит изображение в черно-белое. Эффект фильтра в рамках этих значений меняется по линейному множителю. Фильтр grayscale() не принимает отрицательные значения. Синтаксис:
|
1 |
filter : grayscale( [ <number> | <percentage> ] ) |
Фильтр поворот цвета
Фильтр изменяет цвет изображений. Параметр определяет угол в градусах на цветовом колесе, на который сдвинутся цвета изображения. 0deg даст нам оригинал, значения выше 360deg повторяются. Синтаксис фильтра:
|
1 |
filter : hue-rotate( <angle> ) |
Фильтр инверсии
Фильтр инвертирует цвета изображения. Сила инверсии зависит от значения передаваемого параметра. 0% никак не скажется на изображении, 100% полностью инвертирует цвета, а на 50% мы получим полностью серое изображение. Сила эффекта определяется линейным множителем в рамках этих значений. Фильтр не принимает отрицательные значения. Синтаксис фильтра invert():
|
1 |
filter : invert( [ <number> | <percentage> ] ) |
Фильтр прозрачности
Фильтр делает изображение прозрачным. Значение 0% делает изображение полностью прозрачным, а 100% даст нам оригинал.
Фильтр работает как свойство opacity в CSS. Разница лишь в том, что некоторые браузеры для повышения производительности включают аппаратное ускорение для данного фильтра. Синтаксис:
|
1 |
filter: opacity( [ <number> | <percentage> ] ); |
Фильтр насыщенности
Фильтр контролирует насыщенность изображений. Сила эффекта зависит от значения параметра. Отрицательные значения не принимаются. При минимальном значении в 0% изображение полностью теряет насыщенность. 100% никак не меняет изображение. Для увеличения насыщенности необходимо использовать значения выше 100%. Синтаксис:
|
1 |
filter : saturate( [ <number> | <percentage> ] ) |
Фильтр сепии
Фильтр придает изображению оттенок сепии. 100% дает полный эффект сепии, а 0% даст нам оригинал. Сила эффекта в пределах этих значений меняется по линейному множителю. Отрицательные значения запрещены. Синтаксис sepia():
|
1 |
filter : sepia( [ <number> | <percentage> ] ) |
Фильтр URL
Возникает ситуация, когда вам нужно создать свой фильтр. Фильтр url задает ссылку на XML файл с SVG фильтром. Также можно указать якорь на элемент filter. Пример с постеризацией изображения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Фильтр <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); |
Результат будет похож на изображение ниже:
Работа с несколькими фильтрами
Если вам не хватает одного фильтра, можно применить комбинацию фильтров на одном изображении. Порядок применения фильтров несильно влияет на результат. Несколько фильтров можно применить следующим образом:
|
1 2 |
filter : sepia(0.8) contrast(2); filter : saturate(0.5) hue-rotate(90deg) brightness(1.8); |
Первый фильтр применяется к оригинальному изображению, остальные – к результату предыдущего фильтра.
В некоторых случаях порядок фильтров сильно влияет на результат. К примеру, sepia() после grayscale() даст на выходе сепию, а grayscale() после sepia() даст черно-белое изображение.
Анимация фильтров
Свойство filter можно анимировать. Правильная комбинация изображения и фильтров может дать потрясающий эффект. Взгляните на код ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@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
Источник: //code.tutsplus.com/
Редакция: Команда webformyself.
