Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание черно-белых изображений из цветных с использованием CSS

24 декабря 2016 | Опубликовано в css | 1 Комментарий »

Самый простой способ обесцвечивания цветного изображения — с помощью CSS. Обычно фильтр применяется к классу, так как нередко нужно создать одинаковый эффект у нескольких изображений:

 

 

img.desaturate {
        filter: grayscale(100%);
}

Задать класс изображению тоже просто:

<img src="lena-söderberg.jpg" alt="Lena Söderberg">

Добавление фильтра SVG

Код CSS, показанный выше, работает во всех современных версиях браузеров, как на настольных компьютерах, так и на мобильных устройствах, включая браузер Microsoft Edge.

Чтобы добиться такого же эффекта в браузере Firefox до версии 35, понадобится использовать фильтр SVG, который создадим в отдельном файле под названием desaturate.svg. В этом файле будет следующий код:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <filter id="greyscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
        </filter>
</svg>

Если код SVG выше выглядит слегка пугающе и массив в нем слишком сложен, не волнуйтесь. Это один из фрагментов кода, который мы советуем просто копировать и вставлять как стандартный рецепт для создания черно-белого изображения.

Вместе с этим файлом SVG, находящимся рядом со страницей HTML и нужным изображением, код CSS дополнится такой строкой:

img.desaturate {
        filter: grayscale(100%);
        filter: url(desaturate.svg#greyscale);
}

Добавление поддержки браузера Internet Explorer

Чтобы эффект работал в браузере Internet Explorer от 6 до 9 версий, применим простой собственный фильтр корпорации Microsoft:

img.desaturate{
        filter: gray;
        filter: grayscale(100%);
        filter: url(desaturate.svg#greyscale);
}

Если нужно добавить поддержку устаревших версий браузеров на движке Webkit, расширим код таким образом:

img.desaturate{
        -webkit-filter: grayscale(1);
        -webkit-filter: grayscale(100%);
        filter: gray;
        filter: grayscale(100%);
        filter: url(desaturate.svg#greyscale);
}

Этот способ не работает в браузерах Internet Explorer 10 и 11 версий. Если нужно создать одинаковый визуальный эффект совершенно во всех браузерах, можно воспользоваться решением на языке программирования Javascript для разных браузеров или, например, скриптом Greyscale.js.

Код CSS, написанный выше, позволяет нам на лету визуально преобразовать изображение в черно-белое в браузере, без необходимости в сохранении новых версий в программе Photoshop. С помощью кода CSS также можно гораздо проще изменять изображение: например, если уменьшить процент в значениях свойства фильтра со 100% до 50%, то мы получим смешение эффекта обесцвечивания и изначального цветного изображения.

Немного более простой подход для устаревших версий браузера Firefox предполагает включение кода SVG прямо в код CSS без необходимости добавлять что-то в отдельный файл и в тег <body>:

img.desaturate {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray;
        filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:


�


Комментарии

Похожие статьи

Случайные статьи



Друзья

    • Самые комментируемые