Filter Grayscale для знебарвлення картинки засобами CSS (плюс використання jQuery для IE10)
Для того, щоб перетворити зображення на чорно-біле за допомогою 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— дозволяє змінити контрастність зображення, що вказується у відсотках (у десяткових дробах).
Результат застосування цих фільтрів до однієї і тієї ж картинки дивіться нижче
Браузери навчилися розуміти ці властивості нещодавно, але кросбраузерність вже досить непогана, якщо виключити IE. Так-так, ви не недочули, Microsoft знову вставляє палиці в колеса користувачам. Справа в тому, що IE9 підтримує ще старі фільтри, а ось IE, починаючи з версії 10, вже немає. Крім того, розробники не потурбувалися про підтримку нових властивостей, тому IE10 знову потребує милиць. Якщо перейти до розгляду саме нашої задачі знебарвлення картинки, то для цієї мети підходять SVG-фільтри, які вимагають, внесення додаткового коду в розмітку, що не завжди зручно. Тому найкращим варіантом, на мій погляд, є використання jquery-скрипта gray, який можна завантажити на ГітХабі. Він дає можливість зробити чорно-білим не лише картинку (тег img), а й фон, фон із властивістю background-size і навіть спрайт!
Як використовувати gray plugin? Просто вставити jQuery і скрипт, що знаходяться в папці js перед закриваючим тегом body таким чином