Сделай свой сайт!

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

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



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

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

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


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

Grayscale - черно-белый фильтр

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

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

Для чатов Армада переведу небольшой пример в CSS! Вставляем этот код в окошко "Другое" ⇓

1
}img:hover{-webkit-filter: grayscale(100%);

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

Sepia - сепия фильтр

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Все очень просто, разберем 8 пример изображения с фильтром размытия (blur).

HTML разметка

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

CSS разметка

Исходя из демо примера, изображение в статичном состоянии находится уже в размытом состоянии, при наведении оно становится четким, т.е. размытие деактивируется. Исходя из этого получаем следующие стили:

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

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !