Простые кроссбраузерные текстовые маски при помощи режимов наложения
Есть много способов делать маски обрезки по тексту (оформление графики или эффекты внутри букв) в вебе, но все эти техники какие-то бессистемные: 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. В следующей статье я рассмотрю ещё больше возможностей с текстом и наложениями.