Фильтры для изображения webkit-filter (CSS)

CSS
Dolphin
21.09.2017 08:04:10 pm
Доброго времени суток! Сегодня расскажу о фильтрах для изображения CSS (CSS Filter Effects). CSS Filter Effects - предназначен для наложения эффектов на картинку, при помощи этих фильтров можно сделать из цветного изображения черно-белое, изменить контрастность, эффект сепии, и так далее.
Перед тем как перейти к примерам работы фильтров, хочу предупредить, что свойство фильтра поддерживается не всеми браузерами. Я использую Яндекс Браузер и Google Chrome.
Для примера возьмите любую цветную картинку и подключите ее в свой HTML документ, вот так: 
<img src="01.jpg"> 

Теперь мы будем издеваться на этой картинкой, закидывать ее разными эффектами!
Для начала, давайте превратим свою цветную картинку в черно-белую, для этого в файл стиля (.css) добавляем следующий код: 
img {  
    -webkit-filter: grayscale(100%);  
}

Увидели волшебное превращение? Цвет дозируется процентами, в данном пример 100% - предел.

Теперь давайте добавим контрастности в картинке, меняем вышенаписанный CSS код на: 
img {  
    -webkit-filter: contrast(150%);  
}

Теперь давайте, испробуем эффект Gaussian Blur, так сказать: размажем нашу картинку, для этого вставляем такой код: 
img {  
    -webkit-filter: blur(2px);  
}

Чем больше пикселей будет написано, тем сильнее будет размазано изображение.

Переходим к настройкам яркости картинки, делаем так: 
img {  
    -webkit-filter: brightness(150%);  
} 

Дозировка яркости производится процентами, чем больше процент, тем ярче изображение.

И глянем еще один эффект - Сепия, пишем так: 
img {  
    -webkit-filter: sepia(90%);  
}

Сепия дозируется процентами, предел - 100%.

Надеюсь информация была полезной. Спасибо.