CSS3 фильтры для изображений

Раньше для изменения, например, яркости/контрастности изображения для сайта, использовались фильтры различных графических редакторов. Эти времена уже в прошлом, сейчас данные эффекты можно реализовать при помощи свойств и параметров технологии CSS3.

Filter - свойство каскадных таблиц стилей CSS3, применяемое для изменения цветовой гаммы изображений. В основном используется с префиксом -webkit-.

К сожалению, данное CSS3 свойство не поддерживается устаревшими браузерами. Со списком поддерживаемых браузеров Вы можете ознакомиться здесь.

1. Grayscale - серый оттенок (черно-белый фильтр)

Для создания эффекта "черно-белого фильтра" используется параметр  grayscale, которому применяется значение от 0 - 100%.

<img src="/foto.jpg" style="-webkit-filter: grayscale(100%);" alt="" />

2. Sepia - светло-коричневый оттенок (сепия фильтр)

Для создания эффекта "светло-коричневого фильтра" используется параметр  sepia, которому применяется значение от 0 - 100%.

<img src="/foto.jpg" style="-webkit-filter: sepia(100%);" alt="" />

3. Brightness - фильтр яркости

Для создания эффекта "фильтра яркости" используется параметр  brightness, которому применяется значение от 0 до больших показателей (в процентах).

Например, при 0% изображение будет черным, при 100% - будет использоваться исходная яркость изображения, при 200% - яркость увеличится в 2 раза.

<img src="/foto.jpg" style="-webkit-filter: brightness(200%);" alt="" />

4. Contrast - фильтр контрастности

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

При 0% изображение будет черным, при 100% - будет использоваться исходный контраст изображения, при 150% - контрастность увеличится в 1,5 раза.

<img src="/foto.jpg" style="-webkit-filter: contrast(150%);" alt="" />

5. Saturate - фильтр насыщенности

Фильтр насыщенности придает изображению более сочный и насыщенный вид. Используется параметр  saturate, применяется значение от 0 до больших показателей (в процентах).

При 0% изображение становится черно-белым (аналог фильтра grayscale), при 100% - будет использоваться исходная насыщенность изображения, при 200% - насыщенность увеличится в 2 раза.

<img src="/foto.jpg" style="-webkit-filter: saturate(200%);" alt="" />

6. Invert - фильтр инверсии цветов

Инверсия цветов - изменения цветовой гаммы изображения на противоположный по спектру.

За работу фильтра отвечает параметр  invert, применяется значение от 0 до 100%.

<img src="/foto.jpg" style="-webkit-filter: invert(100%);" alt="" />

7. Hue-rotate - фильтр оттенка

Данный фильтр меняет угол цвета, основываясь на "цветовом колесе", и смещает его на указанное значение в градусах.

За работу фильтра отвечает параметр  hue-rotate, применяется значение от 0 до 360 градусов (deg).

<img src="/foto.jpg" style="-webkit-filter: hue-rotate(300deg);" alt="" />

8. Blur - фильтр размытия

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

За работу фильтра отвечает параметр blur, значение задается в пикселях (px).

<img src="/foto.jpg" style="-webkit-filter: blur(1px);" alt="" />

9. Opacity - фильтр прозрачности

Фильтр регулирует уровень прозрачности изображения.

За работу отвечает параметр opacity, значение задается от 0 - 100%. При значении в 10% изображение будет еле видно, при 100% - прозрачности не будет.

<img src="/foto.jpg" style="-webkit-filter: opacity(10%);" alt="" />

Как сделать анимацию при наведении (как в демо примерах)?

/* К изображению применяем класс blur */
<img src="/foto.jpg" class="blur" alt="" />

img {
        transition: 0.5s all; //плавность перехода, 0.5 секунды
        }
img.blur {
        -webkit-filter:blur(1px); //размытие активно, смещение 1px
        }
img.blur:hover {
        -webkit-filter:blur(0px); //размытие деактивировано, смещение пикселей отсутствует
        }