(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Фильтры для изображений с CSS Filter Effects

Источник: habrahabr
grokru

В графических редакторах очень легко менять яркость или контраст изображений, применять различные фильтры. С недавних пор это можно делать и средствами CSS прямо на веб-страницах с помощью CSS Filter Effects.



Демонстрация / Скачать исходники / Спецификация Filter Effects 1.0

Поддержка браузерами


Как обычно, браузеры, поддерживающие данный параметр, можно посмотреть на caniuse.com:



Эффекты


Применение эффектов очень простое, например, такая конструкция применяется для перевода цветного изображения в черно-белое:

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




Сепия, аля Инстаграм:
img {  
     -webkit-filter: sepia(100%);  
}  




В обоих эффектах можно устанавливать уровень эффекта от 0 до 100%.

Яркость, 50%:
img {  
    -webkit-filter: brightness(50%);   
}  




brightness может принимать отрицательные значения, изображение будет затемняться:
img {  
    -webkit-filter: brightness(-50%);   
}  


При 100% эффекта contrast изображение не меняется, поэтому можно установить 200%:

img {  
    -webkit-filter: contrast(200%);   
}  




Эффекты можно комбинировать:
img {  
    -webkit-filter: grayscale(100%) contrast(150%);   
} 


Так можно получить красивый hover-эффект:
img:hover {  
    -webkit-filter: grayscale(0%);  
}  
img:hover {  
    -webkit-filter: sepia(0%);   
}  
img:hover {  
    -webkit-filter: brightness(0%);   
}  
img:hover {  
    -webkit-filter: contrast(100%);   
}  


Эффект blur:
img:hover {  
    -webkit-filter: blur(5px);   
}  


В спецификации подробно описаны остальные эффекты, такие как hue-rotate, invert и saturate. Но они гораздо менее применимы на живых проектах.

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 31.10.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
SAP® Crystal Dashboard Design Departmental 2016 WIN INTL NUL
Allround Automation PL/SQL Developer - Annual Service Contract - 5 users
Kaspersky Endpoint Security для бизнеса – Стандартный Russian Edition. 10-14 Node 1 year Base License
IBM Rational Functional Tester Floating User License
ABBYY Lingvo x6 Европейская Профессиональная версия, электронный ключ
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Информационные технологии: CASE, RAD, ERP, OLAP
Безопасность компьютерных сетей и защита информации
Новости ITShop.ru - ПО, книги, документация, курсы обучения
OS Linux для начинающих. Новости + статьи + обзоры + ссылки
Компьютерные книги. Рецензии и отзывы
Один день системного администратора
Краткие описания программ и ссылки на них
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
Обсуждения в форумах
Топ рейтинг слотов 2021 года (6)
Среди огромного выбора азартных слотов...
 
Отличается ли ДрифтКазино от беттинга? (43)
Друзья, давно заметил, что на Дрифте уже несколько месяцев во всю рекламируется и предлагается...
 
Нормальные казино в 2021 году (14)
После долгих поисков все таки смог найти хорошие игровухи, хотя и ушла куча времени, пока я...
 
Игровые автоматы на настоящие деньги (8)
Только играя в интернет-заведении с лицензией...
 
Программирование (15)
Хочу начать работать в данной сфере. Где можно всему обучиться?
 
 
 



    
rambler's top100 Rambler's Top100