Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание текстового эффекта с использованием режимов наложения

28 ноября 2016 | Опубликовано в css | 1 Комментарий »

Хотя этот эффект, вероятно, не так полезен, как другие эффекты с применением режимов наложения, он достаточно интересен, чтобы мы его подробно рассмотрели. В 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

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

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




Комментарии

Оставить ответ


− шесть = 0

Вставить изображение