Эффекты с несколькими слоями при помощи контуров обрезки, фильтров и режимов наложения в 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. Это тоже может быть интересно: