Эффекты с несколькими слоями при помощи контуров обрезки, фильтров и режимов наложения в CSS

Перевод статьи MultiLayer Effects With CSS Clip Paths, Filters, and Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Режимы наложения, контуры обрезки и фильтры в CSS делают ряд эффектов, которые раньше были доступны только в PhotoShop, возможными в вебе

Одна из возможностей, которая объединяет эти 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 на последнее изображение, оно накладывается на жёлтый «Х» и фотографию под ним. Так как «Х» настоящая буква, она крайне адаптивна (и поскольку она использует единицы 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>

Результат может быть весьма эффектным… и полностью написан в CSS.

See the Pen MultiLayer Fx w/ Clip Paths, Filters & Blend by Dudley Storey (@dudleystorey) on CodePen.

Примечание редактора: первый пример разметки, который использует автор статьи, ошибочен с точки зрения HTML5: элемент <figcaption> не может находиться посреди другого контента <figure> (может быть только в начале или в конце) и должен озаглавливать либо пояснять иллюстрацию, а не быть ее частью. Уже после выхода перевода автор статьи добавил примечание, что разметку в этом примере следует рассматривать лишь как набросок для демонстрации CSS-эффекта, семантически для этой буквы «X» лучше подойдет обычный <div>.

CSS-live.ru предложил своим читателям самим найти эту ошибку в статье, в качестве задачки на внимательность и знание веб-стандартов. Первым с этой задачей справился Андрей Гурылёв. Поздравляем нашего победителя!

P.S. Это тоже может быть интересно:

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.