Перевод статьи Easy Cross-Browser Text Masks with Blend Modes с сайта demosthenes.info, c разрешения автора — Дадли Стори.

Есть много способов делать маски обрезки по тексту (оформление графики или эффекты внутри букв) в вебе, но все эти техники какие-то бессистемные: Chrome и Safari уже давно поддерживают -webkit-background-clip:text;, но это касается только двух браузеров; есть также SVG-техники, но они тоже имеют ограничения.

После экспериментирования с режимами наложения, я понял, что можно воспользоваться ими, чтобы создать маски обрезки по тексту, сделав «бутерброд» из текста и фоновых изображений. Одним из существенных преимуществ является то, что эта техника не только полностью кроссбраузерная (за исключением IE), но также по построению обеспечивает прогрессивное улучшение, с изящным запасным решением.

Техника

Суть метода заключается в том, чтобы обернуть текст в контейнер:

<div class="dark"> <h1>Chicago</h1> </div>

Чтобы результаты обрезки были эффектнее, лучше всего выбирать шрифты с жирными буквами и толстыми шрихами

Тексту задают размер и фоновый цвет, который заполняет его контейнер:

.dark h1  {
margin: 0;
font-size: 20vw;
text-transform: uppercase;
font-family: Montserrat, sans-serif;
line-height: 1.9;
color: #fff;
background: #000;
}

Используемые цвета будут работать лучше, если они полностью противоположные; здесь я использовал чёрный фон с белым текстом.

К контейнеру применяется фоновое изображение; – его не будет видно на данном этапе, поскольку оно скрыто заполненным фоновым цветом текста.

.dark {
text-align: center;
background-size: cover;
background: url(chicago.jpg);
}

И наконец, к элементу с текстом применяется mix-blend-mode, противоположное его фоновому цвету:

	
.dark h1 { mix-blend-mode: darken; }

Т.е., если фон чёрный, то применяем darken; если цвета меняются местами (чёрный текст на белом фоне, как в примере «Houston» ниже), то используем lighten:

.light h1 { mix-blend-mode: lighten; }

Ну разве это трудно? Если браузер не поддерживает mix-blend-mode, то пользователь увидит обычный текст, на сплошном фоне с максимальным контрастом. В любом случае текст остаётся настоящим текстом: вы можете выделить его, скопировать и изменить по желанию.

Перестановка

Если вы хотите, чтобы в браузерах без поддержки mix-blend-mode можно было увидеть изображение, а не текст, то код будет усложнён только слегка. Фоновое изображение становится настоящим изображением, размещённым поверх текста:

<div class="dark">
<h1>Chicago</h1>
<img src="chicago.jpg" alt="Photograph of the Chicago skyline taken from the water during the day">
</div>

CSS для <h1> выглядит точно так же, за исключением того, что в нём отсутствует какой-либо background. Изображение позиционируется абсолютно поверх текста.

div.dark {
text-align: center;
position: relative;
background: #000;
}

.dark h1 {
margin: 0;
font-size: 20vw;
text-transform: uppercase;
font-family: Montserrat, sans-serif;
line-height: 1.9;
color: #fff;
}

div.dark img {
position: absolute;
top: 0;
left: 0;
width: 100%;
}

Затем для изображения устанавливается соответствующий

mix-blend-mode:
.dark img { mix-blend-mode: darken; }

Опять же, обратный эффект (чёрный текст, белый фон) тоже достижим; смотрите более подробный демо-пример на CodePen. Визуально, эффект точно такой же, как и в первом примере; разница только в элементе, который имеет приоритет при выборе и изящной деградации.

Заключение

Режимы наложения – одни из новейших аспектов CSS, которые имеют нетронутые богатства для дизайна и UI. В следующей статье я рассмотрю ещё больше возможностей с текстом и наложениями.

Смотите итоговый пример на CodePen

Фотографии Дэниела Швена и Рона Кикучи, под лицензией Creative Commons

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

None Found