Как использовать визуальные фильтры в веб-разработке?

Для использования визуальных фильтров в веб-разработке можно применять их к любому видимому элементу на странице. habr.com Фильтры обрабатываются попиксельно, применяя заданные эффекты и отрисовывая результат поверх оригинала. html5book.ru habr.com

Некоторые фильтры и их назначение:

• blur() создаёт размытие изображения. purpleschool.ru Пример использования: img { filter: blur(5px); }. purpleschool.ru
• brightness() изменяет яркость изображения. purpleschool.ru Значение 1 оставляет изображение без изменений, меньше 1 уменьшает яркость, больше 1 увеличивает. purpleschool.ru Пример использования: img { filter: brightness(0.5); } — уменьшает яркость изображения до 50%. purpleschool.ru
• contrast() изменяет контрастность изображения. purpleschool.ru Значение 1 оставляет изображение без изменений, меньше 1 уменьшает контрастность, больше 1 увеличивает. purpleschool.ru Пример использования: img { filter: contrast(2); } — удваивает контрастность изображения. purpleschool.ru
• grayscale() переводит изображение в оттенки серого. purpleschool.ru Значение 0 оставляет изображение без изменений, 1 делает его полностью серым. purpleschool.ru Пример использования: img { filter: grayscale(1); } — делает изображение полностью чёрно-белым. purpleschool.ru

Синтаксис использования фильтров: element { filter: filter-function(parameters); }. purpleschool.ru Можно применять несколько фильтров одновременно, разделяя их пробелами. purpleschool.ru

Важно учитывать, что чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу. html5book.ru