Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Filter Grayscale для обесцвечивания картинки средствами CSS (плюс использование jQuery для IE10+ )

Для того чтобы превратить изображение в черно-белое с помощью CSS нам понадобятся фильтры.
Наверное, все знают про фильтры, которые поддерживали еще старые версии IE. Несмотря на все свои недостатки “ослики” обеспечивали такие возможности как

И вот пришел тот светлый день, когда подобного рода фильтры, называемые CSS-фильтры,  решили включить в стандарты. Очевидно, чтобы облегчить простейшую обработку графики. Перечислю коротко основные из них, и то, что  они умеют делать.

Результат применения этих фильтров к одной и той же картинке смотрите ниже

css-filters

Браузеры научились понимать эти свойства недавно, но кроссбраузерность уже довольно неплоха, если исключить IE.
Да-да, вы не ослышались, Microsoft опять вставляет палки в колеса пользователям. Дело в том, что IE9 поддерживает еще старые фильтры, а вот IE начиная с версии 10 уже нет. Кроме того разработчики не побеспокоились о поддержке новых свойств, поэтому IE10 снова нуждается в костылях.
Если перейти к рассмотрению конкретно нашей задачи по обесцвечиванию картинки,  то для этой цели подходят SVG-фильтры, которые требуют, внесения дополнительного кода в разметку, что не всегда удобно. Поэтому лучшим вариантом, на мой взгляд, является использование jquery-скрипта gray, который можно скачать на ГитХабе . Он дает возможность сделать черно-белым не только картинку (тег img), но и фон, фон со свойством background-size и даже спрайт!

По какому принципу действует скрипт? Он использует плагин Modernizr для определения браузерной поддержки. Если браузер поддерживает SVG-фильтры и не поддерживает CSS-фильтры, скрипт вставляет в разметку код с SVG-фильтрами. Подробнее о Modernizr и о том, как он может заменять условные комментарии читайте в ближайших статьях.

Как же использовать gray plugin? Просто вставить jQuery и скрипт, находящиеся в папке js перед закрывающим тегом body таким образом

Естественно, нужно предварительно скачать jQuery с сайта jquery.com и не забыть при необходимости поменять пути к файлам и название папки.
В общем-то и все на этом, так как плагин автоматически инициализируется для элементов с классом grayscale. Но для особых случаев можно вручную инициализировать скрипт, указав в самом низу следующий код (тут вместо класса по умолчанию grayscale используется класс my-grayscale)

Предположим, по умолчанию наша картинка будет черно-белой, а при наведении мышки плавно приобретать цвет, тогда потребуется применить к ней два класса grayscale и grayscale-fade.

Теперь напишем стили картинки

Сначала идут CSS-фильтры с вендорными префиксами (Chrome, Mozilla) для лучшей совместимости и по стандарту W3C – grayscale(100%), в скобках процент, показывающий степень обесцвеченности (от 0 до 100).
filter: gray – формат записи для старых браузеров IE (лучше такие свойства выносить в отдельный файл, с помощью условных комментариев).
transition обеспечивают анимацию, плавность проявления цвета (не поддерживается IE8, IE9 – можно отказаться от данного свойства по принципу изящной деградации, так как оно не влияет на доступность данных либо использовать jQuery анимацию).

Стили картинки при наведении мышки будут такими

Чтоб отменить фильтр grayscale указываем 0%,  filter:none отменяет фильтр для  IE6-9.

Остается задать стили для SVG элемента, его прозрачность будет плавно изменяться до 0 при наведении мышки

Полностью код будет выглядеть так

А вот и пример работы кода

Работает в IE7-11, Mozilla 35+, Chrome 19+, Opera 15+
Спасибо за внимание!

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Комментарии
  1. Спасибо, очень долго искал кроссбраузерное решение…
    тут же все пашет четко

  2. А оригинала почему нет для наглядного сравнения работы фильтров?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*