Хотя этот эффект, вероятно, не так полезен, как другие эффекты с применением режимов наложения, он достаточно интересен, чтобы мы его подробно рассмотрели. В 1999 году Michael Bierut и Nicole Trice создали оформление для Architectural League’s Beaux Arts Ball того года. Это выдающийся образец графического дизайна, который можно воссоздать с помощью режимов наложения. Для начала, разметка: 

<h1>
        <span id="light">
                <span>L</span>
                <span id="i">I</span>
                <span id="g">G</span>
                <span id="h">H</span>
                <span id="t">T</span>
        </span>
        <span id="years">YEARS</span>
</h1>

Выбор шрифта особенно важен в этом случае: чтобы эффект сработал, символы должны занимать одинаковое визуальное пространство, но не выглядеть угловато. Изначально использовался шрифт Interstate, созданный Tobias Frere-Jones, мы же выбрали бесплатный, визуально похожий шрифт Montserrat, созданный Julieta Ulanovsky.

Хотя буквы занимают одинаковое пространство, расстояние между ними будет по умолчанию разным. В нашем примере слово “YEARS” оставлено нетронутым, а в слове “LIGHT” каждая буква помещена в элемент span, чтобы ее можно было располагать с помощью CSS:

h1 {
        font-size: 20vw;
        margin: 0;
        position: relative;
        font-weight: 600;
}
h1 > span {
        position: absolute;
        left: 0;
        width: 100%;
}
#light { left: -1vw; }
#light > span { position: relative; }
#i { left: 3vw; }
#g { left: 3vw; }
#t { left: -2vw; }
#h { left: 1vw; }

Размер текста задается в единицах измерения vw, так что он отлично масштабируется при изменении размеров окна, а, чтобы избежать ситуаций, когда шрифт, размер которого зависит от размера экрана, вылазит за пределы блока, в котором содержится, на экранах большого размера, может понадобиться применение библиотеки media query.

Для создания эффекта усиления при наложении текста для слова “YEARS” используется экранный режим наложения:

#years {
        mix-blend-mode: screen;
        letter-spacing: 3vw;
}

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Анимированная мигающая неоновая вывеска с использованием CSS
• Создание трехмерного вытянутого текста с использованием CSS
• Интересный эффект выделения текста с использованием псевдоэлемента CSS выделения