Простые кроссбраузерные текстовые маски при помощи режимов наложения

Есть много способов делать маски обрезки по тексту (оформление графики или эффекты внутри букв) в вебе, но все эти техники какие-то бессистемные: 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; }

See the Pen Text Clipping Masks with Blend CSS Blend Modes by uscms (@uscms) on CodePen.

Ну разве это трудно? Если браузер не поддерживает 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; }

Опять же, обратный эффект (чёрный текст, белый фон) тоже достижим.

Заключение

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

530