(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
IBM Domino Enterprise Server Processor Value Unit (PVU) License + SW Subscription & Support 12 Months
The BAT! Professional - 1 компьютер
GFI LanGuard подписка на 1 год (25-49 лицензий)
Купить WinRAR : 5 : Академическая лицензия 1 лицензия
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
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100