CSS фильтры изображений

фильтры css изображений

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

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

Но все же в CSS-фильтрах имеется один небольшой недостаток – не все веб-браузеры поддерживают визуальные эффекты. Разумеется, это лишь вопрос времени. И к наступлению часа «х» разработчикам нужно быть готовым. А пока рассмотрим то, что на данный момент уже реализовано.

Поддержка CSS фильтров браузерами

В основном все ходовые браузеры, Firefox, Chrome, Opera, имеют «дружеское» отношение с фильтр-эффектами. Чего не скажешь о IE, который напрочь отказывается поддерживать эффекты, даже в самых поздних версиях.

Браузер Explorer Chrome Firefox Safari Opera Android iOS
Версия no 31+ 35+ 7+ 18+ 4.4+ 6+
filter (-webkit-) + (-webkit-) (-webkit-) (-webkit-) (-webkit-)

Функции и синтаксис CSS фильтров

Во всех свойствах CSS имеются некие параметры, сочетающие в себе порядок прописывания значений. Свойство filter не является исключением, как и другие, оно может использовать комбинацию нескольких правил в одном применении. К примеру, добавить фильтр яркости для изображения, а через пробел указать еще один — контрастность. Мы рассмотрим все в этой статье с несколькими примерами для лучшего понимания.

Синтаксис

filter: название фильтра (процент значения) ;
filter: url(img.svg);
filter: blur(10px);
filter: brightness(0.9);
filter: contrast(150%);
filter: drop-shadow(5px 5px 10px black);
filter: grayscale(80%);
filter: hue-rotate(60deg);
filter: invert(80%);
filter: opacity(50%);
filter: saturate(50%);
filter: sepia(40%);
/* Применение нескольких фильтров */
filter: contrast(150%) grayscale (80%);

Список фильтров

Фильтр Описание
blur (px) Фильтр для размытия изображения. Степень размытия указывается в пикселях. Если число не задано, то по умолчанию используется 0.
drop-shadow () Тень. Альтернатива свойству box-shadow с аналогичными параметрами и тем же порядком прописывания. Исключением является четвертое значение «растяжение»: почти все браузеры его не поддерживают.
grayscale (%) Фильтр «обесцветить». Применяются оттенки серого цвета к изображению в зависимости от указанного процента. Не допускается отрицательное значение, а оригинальность картинки равна 0.
brightness (%) Настройка яркости изображения. Значение в 100% показывает исходную точку яркости. Регулировка совершается как отрицательно (-50%), так и положительно (150%).
contrast (%) Настройка контрастности изображения. Как и в предыдущем фильтре, значение в 100% покажет исходную точку. Изменения можно задавать отрицательные (-20%) и положительные (120%).
hue-rotate (deg) Поворотное наложение тона цвета. В зависимости от указанного градуса (от 0deg до 360deg) на изображение будет налаживается цвет, который определяется по цветовому кругу.
invert (%) Инверсия изображения. Применяется значение от 0 до 100% без отрицательного параметра.
saturate (%) Насыщенность изображения. Исходное положение определяется в 100% и не имеет отрицательного значения.
sepia (%) Эффект сепия. Оригинальность картинки определяется в 0% и доступна до значения 100% без отрицания.
opacity (%) Прозрачность картинки. Еще один фильтр, у которого есть аналогичное свойство opacity с таким же способам в использовании. Настройка допускается от 0 до 100% без отрицательного параметра.
url () CSS ссылка на SVG элемент с определенным идентификатором #id.
initial Устанавливает значение свойства по умолчанию.
inherit Наследует все значения свойства своего родительского элемента.

Примеры CSS filters

Мы подошли к интересной части статьи, в которой рассмотрим каждый фильтр в отдельности с примерами его применения. Для наглядности будут использоваться три картинки. Первая покажет исходную точку, облик оригинальности. Вторая послужит статичным примером в применении фильтра, а третья покажет hover-эффект, наведение курсора мыши на изображение.

Фильтр размытия [blur]

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

В оформлении сайта (к примеру – размытие) можно использовать как подкладку для лучшей читаемости текста, расположенного на картинке. Собственно, размытие совершается по гауссу от значения 0 px и до полного исчезновения.

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efbl1 img{
         filter: blur(2px);
        -webkit-filter: blur(2px);
}

/*для hover-эффекта*/
.efbl2 img{
        transition: all 0.6s ease 0s;
}
.efbl2:hover img{
         filter: blur(4px);
        -webkit-filter: blur(4px);
        transition: all 0.6s ease 0s;
}

Фильтр тень [drop-shadow]

Свойство тень пришло к нам еще с третьей версией каскадной таблицы. Безусловно, оно знакомо всем, кто занимается сайтостроением, так как box-shadow в дизайне играет далеко не последнюю роль. Фильтр drop-shadow можно назвать неполноценной альтернативой с аналогичными параметрами, а их всего 5, не считая внутреннюю тень.

Порядок прописывания такой: 5px/-5px (смещение по горизонтали), 5px/-5px (смещение по вертикали), 15px (радиус размытия тени), 5px/-5px (растягивание тени), black (цвет). Фильтр поддерживает весь синтаксис кроме растягивания и значения inset (внутренняя тень), а также добавления нескольких теней через запятую. Но несмотря на все это, присутствуют свои достоинства, к примеру, фильтр учитывает псевдоэлементы, что позволяет отображать точную форму тени элемента. Посмотреть пример.

Также интересным является то, что когда у блока нет фона, а лишь задана обводка border, то при использовании box-shadow будет отображаться тень с якобы учетом фона, то есть сплошная. А в случае использования drop-shadow тень принимает форму обводки без учета фона.

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efdrswd1 img{
         filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4));
        -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4));
}

/*для hover-эффекта*/
.efdrswd2 img{
        transition: all 0.6s ease 0s;
}
.efdrswd2:hover img{
         filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4));
        -webkit-filter: drop-shadow(6px 7px 3px rgba(0, 0, 0, 0.4));
        transition: all 0.6s ease 0s;
}

Фильтр обесцвечивания [grayscale]

Классический стиль фотографии для всех времен в правильном направлении. Фильтр допускает лишь одно значение — положительное. В зависимости от указанного процента оттенки серого будут плавно заменять цвет изображения. Также вместо процентов можно применять дробь до целого числа (0.01/1).

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efgrays1 img{
         filter: grayscale(90%);
        -webkit-filter: grayscale(90%);
}

/*для hover-эффекта*/
.efgrays2 img{
        transition: all 0.6s ease 0s;
}
.efgrays2:hover img{
         filter: grayscale(90%);
        -webkit-filter: grayscale(90%);
        transition: all 0.6s ease 0s;
}

Фильтр яркости [brightness]

Добавление света к «неизведанным» черным углам изображения. В обработке фотографий применяется нередко, так как любительские снимки, как правило, совершаются в плохо освещенных местах. Яркость фильтра регулируется от 0% (полностью черная картинка) до почти полного исчезновения изображения. Оригинальная точка определяется в 100%, а значение также можно указывать дробью.

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efbrig1 img{
         filter: brightness(150%);
        -webkit-filter: brightness(150%);
}

/*для hover-эффекта*/
.efbrig2 img{
        transition: all 0.6s ease 0s;
}
.efbrig2:hover img{
         filter: brightness(150%);
        -webkit-filter: brightness(150%);
        transition: all 0.6s ease 0s;
}

Фильтр контрастности [contrast]

Нехитрый способ сделать изображение более выразительным, поэкспериментировав с настройками яркости самых светлых и темных частей картинки. Фильтр contrast готов этому помочь. Его параметры, как и у многих, исключают отрицательное значение (-150%), а исходное положение обозначается в 100%. Кроме процентов, допускается также дробь (1.5).

Оригинал
Фильтр
Hover-эффект

/*статичное правило*/
.efcontr1 img{
         filter: contrast(150%);
        -webkit-filter: contrast(150%);
}

/*для hover-эффекта*/
.efcontr2 img{
        transition: all 0.6s ease 0s;
}
.efcontr2:hover img{
         filter: contrast(150%);
        -webkit-filter: contrast(150%);
        transition: all 0.6s ease 0s;
}

Фильтр тона цвета [hue-rotate]

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

Если значение указано положительное (150deg), то поворот происходит по часовой стрелке. Соответственно, если отрицательное, то против часовой. В двух положения начинается от 0deg до 360deg.

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efhrotai1 img{
         filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
}

/*для hover-эффекта*/
.efhrotai2 img{
        transition: all 0.6s ease 0s;
}
.efhrotai2:hover img{
         filter: hue-rotate(180deg);
        -webkit-filter: hue-rotate(180deg);
        transition: all 0.6s ease 0s;
}

Фильтр инверсия [invert]

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

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efinve1 img{
         filter: invert(100%);
        -webkit-filter: invert(100%);
}

/*для hover-эффекта*/
.efinve2 img{
        transition: all 0.6s ease 0s;
}
.efinve2:hover img{
         filter: invert(100%);
        -webkit-filter: invert(100%);
        transition: all 0.6s ease 0s;
}

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

Когда изображение теряет свой естественный цвет красок по неизвестным причинам (что-то вроде выгоревшей футболки на солнце), то увеличением насыщенности можно вмиг восстановить прежний вид. А если этот фильтр использовать в сочетании с другими фильтрами, результат будет весьма удовлетворительным. Настройка совершается от 0 исходный вид, до больших чисел.

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efsatut1 img{
         filter: saturate(165%);
        -webkit-filter: saturate(165%);
}

/*для hover-эффекта*/
.efsatut2 img{
        transition: all 0.6s ease 0s;
}
.efsatut2:hover img{
         filter: saturate(165%);
        -webkit-filter: saturate(165%);
        transition: all 0.6s ease 0s;
}

Фильтр сепия [sepia]

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

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efsepiaa1 img{
         filter: sepia(100%);
        -webkit-filter: sepia(100%);
}

/*для hover-эффекта*/
.efsepiaa2 img{
        transition: all 0.6s ease 0s;
}
.efsepiaa2:hover img{
         filter: sepia(100%);
        -webkit-filter: sepia(100%);
        transition: all 0.6s ease 0s;
}

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

Фильтр аналогичный свойству opacity из каскадной таблицы 3-й версии. Синтаксис такой же, а значение прозрачности регулируется от 0% до 100% (исходное положение).

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efopaty1 img{
         filter: opacity(50%);
        -webkit-filter: opacity(50%);
}

/*для hover-эффекта*/
.efopaty2 img{
        transition: all 0.6s ease 0s;
}
.efopaty2:hover img{
         filter: opacity(50%);
        -webkit-filter: opacity(50%);
        transition: all 0.6s ease 0s;
}

Фильтр ссылка [url]

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

Пример, пример, пример

Filter: url(#filmy); 

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

Заключительный пример включает в себя комбинирование фильтров (от двух и более), что позволяет добиться еще лучшего результата. Делается это очень легко, достаточно лишь через пробел перечислить желаемые фильтры.

Оригинал
Фильтр
Hover-эффект
/*статичное правило*/
.efcomff1 img{
         filter: contrast(135%) saturate(165%);
        -webkit-filter: contrast(135%) saturate(165%);
}

/*для hover-эффекта*/
.efcomff2 img{
        transition: all 0.6s ease 0s;
}
.efcomff2:hover img{
         filter: contrast(135%) saturate(165%);
        -webkit-filter: contrast(135%) saturate(165%);
        transition: all 0.6s ease 0s;
}

Фильтр DuoTone [двухцветная модель]

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

Но стоит обратить внимание на то, что эта библиотека построена только средствами CSS, из-за чего эти визуальные эффекты поддерживают еще меньше число браузеров (посмотреть таблицу).

фильтр DuoTone

Скачать библиотеку

Генератор CSS filters

Уже давно повелось создавать генераторы различных CSS свойств. Генераторы градиентов, CSS кнопок и многое-многое другое. Они служат как инструмент, упрощающий работу. А для начинающих вебмастеров могут нести двойную пользу. Ими очень легко пользоваться: перемещаете ползунки, и сразу же виден результат. А по окончании остается лишь скопировать сгенерированный код. То же и с генераторами CSS фильтров. Вот два из них для ознакомления:

http://webcodetools.com/css-generators/
http://www.cssreflex.com/css-generators/filter/

Заключение

Обзор получился весьма немаленький, но надеюсь, что кому-то пригодится на практике. Также не забывайте комбинировать фильтры, один – хорошо, а два будет лучше, в определенных случаях.

Оставить ответ

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