HTML и CSS 1

Css filter или какие есть в css фильтры изображений?

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

Заготовка будет такая же, как в этой статье про увеличение картинки, только изображение я на этот раз возьму другое, чтобы не повторяться. Например, такое:
city
Каждый раз я буду применять к нему новый фильтр и, при необходимости, комментировать результат.

Теория — как пишутся фильтры

Это важно знать. На данный момент фильтры стоит писать только с префиксом -webkit. Без него, скорее всего, они работать не будут. Общий синтаксис свойства такой:
-webkit-filter: название фильтра(значение);
Что ж, на этом короткая вступительная часть закончена, переходим к самому главному!

Яркость и контрастность

Первые два фильтра, которые мы рассмотрим. Яркость задается так:

.city{
-webkit-filter: brightness(1.6);
}


Контрастность:

.city{
-webkit-filter: contrast(1.6);
}


В этих фильтрах значение можно задавать от 0.1 до 10, где 1 — нормальная яркость и контрастность изображения.

Управление насыщенностью цвета

Для этого создали два фильтра — grayscale и saturate. Первый делает картинку менее насыщенной в цветах, добавляет ей эффект черно-белого фото, второй — наоборот, добавляет красок. Примеры использования:

.city{
-webkit-filter: grayscale(0.7);
}

В grayscale можно писать значение от 0 до 1, где 1 — максимальный эффект черно-белого фото.

Как видим, значение 0.7 тоже делает фото гораздо насыщенным на цвета. А теперь сделаем наоборот:

.city{
-webkit-filter: saturate(3);
}

В фильтре saturate уже допускается значение от 0.1 до 10. 1 — нормальное состояние. Мы увеличили насыщенность цвета в 3 раза и вот что получилось:

Поворот цвета и инверсия

Вот это, как по мне, самые интересные фильтры. Благодаря Invert можно создать картинку в полностью противоположных цветах. Указывается значение от 0 до 1, где 1 — полная противоположность текущим цветам.

.city{
-webkit-filter: invert(0.7);
}


Что-то подобное можно делать с помощью hue-rotate, только тут вы указываете радиус поворота цветового круга относительно начальных значений. В общем, я и сам не до конца разобрался, как оно работает, предлагаю просто экспериментировать:

.city{
-webkit-filter: hue-rotate(156deg);
}


Значение можно указывать от 0 до 360deg. И да, 180 градусов — это полная инверсия цвета.

Размытие и полупрозрачность

Эти фильтры уже наверняка известны, если вы используете css3. Например, у теней можно задавать размытие, а свойство opacity позволяет задать прозрачность. Теперь эти возможности появились в виде фильтров.

.city{
-webkit-filter: blur(4px);
}


Размытие задается в пикселях. Обычно хватает от 1 до 10 пикселей. С помощью экспериментов вы можете выяснить, как необходимо сделать вам.

.city{
-webkit-filter: opacity(0.45);
}


По умолчанию прозрачность картинки — 0%, то есть она полностью непрозрачна. Значение opacity(1) соответствует полной непрозрачности, а opacity(0.1) — практически полной непрозрачности. Получается, фильтр делает то же самое, что и свойство opacity? Да, действуют они абсолютно одинаково. Но разница все же есть. По мнению некоторых, применения фильтра дает больше производительности.

Сепия

Отдельно нужно написать об этом фильтре. Сепия — это что-то вроде эффекта старой фотографии. Тут лучше 1 раз увидеть:

.city{
-webkit-filter: sepia(0.8);
}


Значение задается от 0 до 1. 1 — максимальный эффект сепии.

Тень

Вот еще что, тень какая-то? Да, с помощью фильтров также можно создавать тень, такую же, как с помощью box-shadow. Но все же тень при помощи фильтра работает немного по-другому. Чтобы это продемонстрировать, мне нужна png-картинка.
key
И теперь применим к ней тень:

.key{
-webkit-filter: drop-shadow(5px 5px 0 red);
}

Как видите, она задается с помощью drop-shadow, в скобках перечисляются 4 параметра. Отсутствует растяжение, а также не поддерживается ключевое слово inset, которое создает внутреннюю тень. Обо всем этих параметрах теней вы можете прочитать здесь более подробно. И вот что получилось:

Как видите, drop-shadow делает тень четко по краям изображения, box-shadow так не может. Это основное отличие этих двух свойств.

Плавные переходы и анимации фильтров

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

Ну а я покажу пару примеров. В частности, плавное появление тени у картинки при наведении на нее.

.key{
transition: 0.6s;
}
.key:hover{
-webkit-filter: drop-shadow(-5px -5px 0 brown);
}


Результат вы можете увидеть по наведению на изображение.

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

@keyframes filter{
from{-webkit-filter: hue-rotate(0deg);}
to{-webkit-filter: hue-rotate(360deg);}
}

Теперь остается добавить созданные эффекты нашему изображению:

.city10{
animation-name: filter;
animation-duration: 3s;
animation-iteration-count: infinite;
}

Вот что получаем в итоге:

Что ж, на этом мы разобрали все фильтры в css. Я насчитал 10. С их помощью вы уже сегодня можете только на чистом css делать очень много интересных вещей с картинками. Если у вас остались какие-то вопросы, задавайте их в комментарии, а я пойду пока чайку попью smile

Минуточку вашего внимания: Все мы хотим размещать свои сайты на надежном хостинге. Я проанализировал сотни хостингов и нашел лучший - HostIQ В сети сотни положительных отзывов о нем, средняя оценка пользователей - 4.8 из 5. Пусть вашим сайтам будет хорошо.

Еще материалы по HTML

Бесплатный курс по HTML

Премиум уроки по HTML

Полный курс по HTML5

  • Валерий

    Классная статья Михаил!

    2016-06-06 в 8:26 | Ответить