Ранее мы уже говорили о применении фильтров к изображениям и о создание черно-белых изображений из цветных с использованием CSS без необходимости в сохранении новых версий изображений. Можно использовать тот же подход для создания эффекта выцветшей фотографии с помощью тонирования ее сепией.

Код HTML для этого примера включает изображение с заданным классом:

<img src="steampunk-man.jpg" class="sepia" alt="Gentleman wearing a steampunk gasmask and top hat" >

Самый простой подход — использование фильтров:

img.sepia {
        filter: sepia(100%);
}

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

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <filter id="old-timey">
                <feColorMatrix values="0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0" />
                </filter>
</svg>

После сохранения приведенного выше кода в отдельный файл под названием sepia.svg можно будет обращаться к нему в коде CSS.

Теперь запишем свойства для создания этого эффекта в старых версиях других браузеров:

img.sepia {
        filter: url(sepia.svg#old-timey);
        -webkit-filter: sepia(1);
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
        background-color: #5E2612;
        filter: alpha(opacity = 50);
        zoom:1;
}

К сожалению, для браузера Internet Explorer не существует отдельного фильтра для создания эффекта выцветшей фотографии, так что попробуем воссоздать его, поместив фон цвета сепии за изображение и сделав изображение слегка прозрачным, ограничив эти изменения для использования браузером Internet Explorer версии 9 и более ранних версий. Как уже обсуждалось в предыдущих уроках, в браузерах Internet Explorer 10 и 11 версий нет поддержки ни собственных фильтров корпорации Microsoft, ни современных фильтров CSS.

img.sepia {
        filter: url(sepia.svg#old-timey);
        -webkit-filter: sepia(1);
        -webkit-filter: sepia(100%);
        filter: sepia(100%);
        background-color: #5E2612;
        filter: alpha(opacity = 50);
        zoom:1;
}

Использована фотография Daniel Proulx, лицензированная по лицензии Creative Commons. 

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

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

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

• Фоновые изображения в стиле поп-арт с помощью SVG и режимов наложения
• Создание тени от приподнятого угла с использованием CSS
• Создание почтовых марок из изображений с использованием свойства изображения рамки