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

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2029
Поблагодарили: 62 раза

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

Сообщение Slash » Сб фев 15, 2014 12:17 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%.

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

Вернуться в «HTML + CSS»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость