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

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

Nikel, 04.04.2015

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

  • ALPHA — задание прозрачности
  • BLUR — размытие объекта
  • CHROMA — задание прозрачности определенного цвета изображения
  • DROPSHADOW – создание тени  объекта
  • GRAY – создание черно-белого изображения
  • GLOW  — создание свечения вокруг объекта
  • INVERT — инвертирование цветов объекта
  • EMBOSS/ENGRAVE — создание рельефной серой поверхности, гравюры из объекта

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

  • Filter Grayscale — служит для создания черно-белого изображения, задается в процентах (десятичных дробях).
  • Filter Invert — осуществляет инвертирование цветов, также выражается в процентах (десятичных дробях).
  • Filter Blur — Создает эффект размытости. Значение задается в пикселях (px).
  • Filter Opacity — работает по принципу свойства opacity (определяет прозрачность элемента), но дает большую производительность за счет аппаратного ускорения . Значение указывается в процентах или  в десятичных дробях.
  • Filter Drop-shadow — служит для создания тени, также как  аналогичное свойство box-shadow, но имеющее поддержку аппаратного ускорения. Значения задаются по тому же принципу как в box-shadow.
  • Filter Sepia — делает эффект сепии. Значение задается в процентах (десятичных дробях).
  • Filter Saturate  управляет насыщенностью цвета. Значение указывается в десятичных дробях или процентах.
  • Filter Brightness — служит для изменения яркости изображения, задается  в процентах и в десятичных дробях.
  • Filter Contrast — позволяет изменить контрастность изображения, указывается в процентах (в десятичных дробях).

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

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+
Спасибо за внимание!

2 комментариев


    • Йо
      Cancel Replay
    • Июль 28, 2015

    Спасибо, очень долго искал кроссбраузерное решение... тут же все пашет четко

    • I.CaR Soft
      Cancel Replay
    • Февраль 1, 2016

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