Режимы наложения, геометрия обрезки и фильтры делают многие эффекты, ранее доступные только в программе PhotoShop, создаваемыми и с помощью только CSS. Один из эффектов, который можно создать с помощью этих свойств CSS, – накладывание изображений для сравнений «до и после» или для получения других визуальных эффектов. Рассмотрим пример, в котором разместим фотографию лица Хью Джекмана над фотографией лица Клинта Иствуда, сделанные примерно в одно время, это особенно эффектно, так как их костная структура и черты лица имеют много общего.

Для первого примера разметка может выглядеть следующим образом:

<figure id="eastwood-jackman-blend">
        <img src="eastwood.jpg" alt="Black and white photograph of Clint Eastwood">
        <figcaption>X</figcaption>
        <img src="jackman.jpg" alt="Color photograph of Hugh Jackman">
</figure>

Таким образом, большая буква «X» располагается между двумя фотографиями. После этого применим следующий код CSS, в этом случае записанный с помощью Sass:

.eastwood-jackman {
        width: 40%
        padding-top: 50%;
        margin: 0;
        img, figcaption {
                position: absolute;
                top: 0;
        }
        img:last-child {
                mix-blend-mode: multiply;
        }
        figcaption {
                font-family: Futura-CondensedExtraBold;
                font-weight: 400;
                font-size: 45vw
                color: hsla(55,100%,50%,0.8);
                line-height: .77;
                margin-left: 50px;
        }
}

Задав mix-blend-mode: multiply (режим наложения перемножение) последнему изображению, добиваемся эффекта соединения желтой буквы «X» и фотографии под ней. Так как «X» – это настоящая буква, она очень гибкая и адаптивная, благодаря использованию единицы измерения vw, единственная проблема — ее внешний вид полностью зависит от того, установлен или встроен у пользователя уже этот шрифт или нет. Этого никогда нельзя полностью гарантировать, так что более эффективным подходом может быть обрезка верхнего изображения. Для второго примера используется почти такая же разметка:

<figure id="eastwood-jackman-clip">
        <img src="eastwood.jpg" alt>
        <img src="jackman.jpg" alt>
</figure>

Начало кода CSS остается тем же, так что сконцентрируемся на последнем изображении в разметке, вот нужный код без приставок производителей:

img:last-child {
        clip-path: url(#y-shape);
        clip-path: polygon(16% 0, 40% 57%, 40% 100%, 72% 100%, 72% 57%, 100% 0, 72% 0%, 57% 28%, 48% 0);
        filter: hue-rotate(120deg);
}

О разметке SVG, нужной браузеру Firefox для аналогичной обрезки изображения, можно почитать в этом уроке:

<svg id="shapeclipper">
        <defs>
                <clipPath id="y-shape" clipPathUnits="objectBoundingBox">
                        <polygon points=".16 0, .40 .57, .40 1, .72 1, .72 .57, 1 0, .72 0, .57 .28, .48 0" />
                </clipPath>
        </defs>
</svg>

Примечание 

Элементы <figure> и <figcaption> использовались в примере как разметка заглушки: если нужно использовать более чем одну букву для накладывающегося текста, элемент <figcaption> был бы подходящей разметкой. Но здесь нет ничего, что нельзя было бы создать с помощью блоков, и код в результате был бы более семантически правильным в большинстве случаев.

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

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

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

• Создание улучшенных фонов с помощью режима наложения
• Галерея изображений с помощью свойства CSS object-fit: уменьшенное и полное изображения в одном файле
• Улучшенные рамки изображения с помощью режима наложения