Филтрирайте скалата на сивото за десатуриране на изображения с помощта на CSS (плюс използване на jQuery за IE10 +)

За да превърнем изображението в черно и бяло с помощта на CSS, се нуждаем от филтри.
Вероятно всеки знае за филтри, поддържани от по-стари версии на IE. Въпреки всичките им недостатъци, "магаретата" предоставиха такива възможности като

  • АЛФА - задаване на прозрачност
  • BLUR - размазване на обекта
  • ХРОМА - настройка на прозрачността на определен цвят на изображението
  • DROPSHADOW - създаване на сянка на обект
  • СИВ - създаване на черно-бяло изображение
  • СВЕТ - създаване на блясък около обекта
  • ОБРАТИ - инвертиране на обектни цветове
  • ЕМБОС/ГРЪВ - създаване на релефна сива повърхност, гравиране от предмет

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

  • Филтрирайте сивата скала - служи за създаване на черно-бяло изображение, зададено като процент (десетични дроби).
  • Филтър Обръщане - инвертира цветовете, изразени също като процент (десетични дроби).
  • Размазване на филтъра - Създава ефект на размазване. Стойността се задава в пиксели (px).
  • Непрозрачност на филтъра - работи на принципа на свойството opacity (определя прозрачността на елемент), но дава по-добра производителност поради хардуерно ускорение. Стойността е посочена в процентни или десетични дроби.
  • Филтърна сянка - служи за създаване на сянка, точно като подобното свойство box-shadow, но с поддръжка за хардуерно ускорение. Стойностите се задават по същия начин, както в box-shadow.
  • Филтрирайте сепия - прави ефект на сепия. Стойността е дадена като процент (десетични дроби).
  • Филтър наситен - контролира наситеността на цветовете. Стойността е посочена в десетични дроби или проценти.
  • Яркост на филтъра - служи за промяна на яркостта на изображението, зададена като процент и в десетични дроби.
  • Филтър Контраст - позволява ви да промените контраста на изображението, той се посочва като процент (в десетични дроби).

Вижте резултата от прилагането на тези филтри към същата снимка по-долу.

Браузърите се научиха да разбират тези свойства наскоро, но съвместимостта с различни браузъри вече е доста добра, ако изключите IE.
Да, добре сте чули, Microsoft отново поставя спица в колелата на потребителите. Факт е, че IE9 все още поддържа стари филтри, но IE от версия 10 не го поддържа. В допълнение, разработчиците не са си направили труда да поддържат нови функции, така че IE10 отново се нуждае от патерици.
Ако се обърнем към разглеждането на конкретната ни задача за десатуриране на изображение, тогава SVG филтрите са подходящи за тази цел, които изискват добавяне на допълнителен код към маркировката, което не винаги е удобно. Следователно най-добрият вариант, според мен, е да се използва jquery скрипт сив, който може да бъде изтеглен от GitHub. Това дава възможност да се направи черно-бяло не само картина (img таг), но и фон, фон със свойството background-size и дори спрайт!

Как да използвам сивия плъгин? Просто вмъкнете jQuery и скрипта, намиращи се в папка js, преди да затворите маркера на тялото като този