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

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

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

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

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