Содержание
Текст
Управляем цветом, эффектами и градиентами в веб типографике
13 минут чтения
Управляем цветом, эффектами и градиентами в веб типографике
13 минут чтения
Статичные модули
Динамичные модули
Содержание
Типографика в веб-плакате работает иначе, чем в печатном. Здесь буквы могут светиться, рассыпаться, заполняться изображением или появляться посимвольно. CSS даёт дизайнеру набор свойств, которые превращают обычный заголовок в визуальное высказывание. Этот модуль собирает типографические приёмы, которые студенты чаще всего применяют в своих работах.
Текст, залитый плавным переходом цвета вместо однотонной заливки. Приём часто встречается в веб-плакатах с яркой, экспрессивной палитрой, где одного цвета для заголовка недостаточно. Градиент может быть статичным или анимированным, когда цветовая волна медленно протекает сквозь буквы.
ОбъяснениеЭффект строится на трёх свойствах, которые работают вместе. Свойство background задаёт градиент на элемент как обычный фон. Затем background-clip:text обрезает этот фон по контуру букв, и градиент становится видимым только внутри текста. Последний шаг — color: transparent, который делает саму заливку текста прозрачной, чтобы градиентный фон проступил.
Для анимации нужно увеличить background-size до 200–300% ширины элемента. Это создаёт «запас» градиента за пределами видимой области. Затем через @keyframes анимируется background-position, и градиент плавно скользит по буквам.
<div class="demo-gradient-text">градиент</div>
.demo-gradient-text {
font-size: 64px;
font-weight: 900;
background: linear-gradient(
90deg,
#9eff70,
#84ecff,
#9eff70,
#84ecff,
#9eff70
);
background-size: 300% 100%;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
animation: text-gradient-flow 4s linear infinite;
}
@keyframes text-gradient-flow {
0% { background-position: 0% 50%; }
100% { background-position: 300% 50%; }
}
Попробуйте использовать градиент из трёх и более цветов, чтобы при анимации переходы выглядели более плавными. Два цвета создают ощущение маятника, а несколько цветов формируют текучий поток, где сложно уловить начало и конец цикла.
Буквы превращаются в контуры, сохраняя только обводку. На крупном кегле это выглядит как плакатная графика, где типографика работает скорее как форма, чем как носитель смысла. Приём хорош для декоративных заголовков и фоновых надписей, которые задают ритм композиции, но не перетягивают на себя внимание.
ОбъяснениеЗа обводку отвечает свойство -webkit-text-stroke, которое принимает толщину линии и цвет. Чтобы заливка исчезла, нужно задать color: transparent. В результате остаётся только контур символов. Толщина обводки сильно влияет на восприятие. Тонкая обводка в 1–2px создаёт лёгкий, воздушный текст. Толстая обводка в 4–6px придаёт буквам графичность и вес, но на мелком кегле может съесть форму символа, потому что обводка рисуется по центру контура и частично заходит внутрь буквы. буквам.
<div class="demo-stroke-text">Контур</div>
.demo-stroke-text {
font-size: 72px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
color: transparent;
-webkit-text-stroke: 2px #fff;
}
/* Толщина обводки влияет на восприятие:
1-2px — лёгкий контур,
4-6px — графичный, плакатный текст */
Свойство -webkit-text-stroke до сих пор работает только с вендорным префиксом -webkit, хотя поддерживается всеми современными браузерами. Не забывайте задавать color в качестве фоллбэка для редких случаев, когда обводка не отображается.
Несколько значений text-shadow, наложенных друг на друга, создают объём и глубину. Три-пять теней с нарастающим размытием и смещением превращают плоский текст в нечто трёхмерное. В зависимости от настроек можно получить неоновое свечение, ретро-эффект выдавленного текста или мягкий объём.
ОбъяснениеСвойство text-shadow принимает несколько значений через запятую, где каждое значение добавляет отдельный слой тени. Первая тень рисуется ближе всего к тексту, последняя оказывается в самом низу стопки.
<div class="demo-blur-text">Блюр</div>
.demo-blur-text {
font-size: 56px;
font-weight: 700;
color: #fff;
animation: blur-pulse 3s ease-in-out infinite alternate;
}
@keyframes blur-pulse {
0% {
text-shadow:
0 0 4px #fff,
0 0 11px #fff,
0 0 19px #fff,
0 0 40px #0fa,
0 0 80px #0fa;
}
100% {
text-shadow:
0 0 2px #fff,
0 0 5px #fff,
0 0 10px #fff,
0 0 20px #0fa,
0 0 40px #0fa;
}
}
/* Каждый слой text-shadow добавляет
глубину свечения */
Каждая буква появляется отдельно, со своей задержкой. Буквы могут выпрыгивать снизу, всплывать с затуханием, рассыпаться по экрану и собираться обратно. Этот приём развивает каскадный паттерн из модуля «Движение», но применяет его к типографике, где эффект ощущается особенно выразительно, потому что зритель непроизвольно следит за каждой буквой.
ОбъяснениеДля посимвольной анимации каждая буква оборачивается в отдельный span. Все спаны получают одну и ту же анимацию, но с нарастающей animation-delay через nth-child или инлайновую CSS-переменную --i. Важно помнить про пробелы между словами. Пробел тоже нужно обернуть в span, иначе слова слипнутся.
Формула задержки обычно выглядит как animation-delay: calc(0.05s * var(--i)), где --i задаётся в HTML как style="--i: 0", style="--i: 1" и так далее. Шаг в 0.05–0.1 секунды создаёт быструю последовательность, 0.15–0.2 секунды делают появление более торжественным.
<div class="demo-letter-wrap">
<span class="demo-letter" style="--i:0">П</span>
<span class="demo-letter" style="--i:1">л</span>
<span class="demo-letter" style="--i:2">а</span>
<span class="demo-letter" style="--i:3">к</span>
<span class="demo-letter" style="--i:4">а</span>
<span class="demo-letter" style="--i:5">т</span>
</div>
.demo-letter-wrap {
display: flex;
font-size: 52px;
font-weight: 800;
text-transform: uppercase;
}
.demo-letter {
display: inline-block;
color: #fff;
opacity: 0;
animation: letter-pop 0.5s ease-out both infinite;
/* Задержка через CSS-переменную */
animation-delay: calc(0.07s * var(--i));
}
@keyframes letter-pop {
0% { opacity: 0; transform: translateY(30px); }
30% { opacity: 1; transform: translateY(-5px); }
100% { opacity: 1; transform: translateY(0); }
}
Без animation-fill-mode: both буквы мелькнут в своём конечном состоянии до начала анимации, а потом прыгнут в начальный кадр. both гарантирует, что каждый символ принимает стили первого кадра ещё до старта задержки и сохраняет стили последнего кадра после завершения
Одна из адаптированных версий глитча для типографики. Текст на мгновение разрывается на горизонтальные полосы, которые сдвигаются в стороны с хроматическим разложением по цветам. Приём с сильным характером, который задаёт тон всей композиции и хорошо работает в плакатах с тематикой технологий, ошибок или киберпанка.
ОбъяснениеГлитч строится на псевдоэлементах ::before и ::after, которые дублируют текст через content: attr(data-text). Каждый псевдоэлемент размещается точно поверх оригинала через position: absolute и получает свой цвет для имитации RGB-разложения. Обычно ::before окрашивается в красноватый оттенок, а ::after в голубой.
Анимация использует clip-path: inset() для вырезания горизонтальных полос и translateX для их смещения вбок. Тайминг через steps(1) вместо плавного перехода создаёт мгновенные переключения, который и создаёт сам эффект глитча.
<!-- data-text дублирует текст для ::before и ::after -->
<div class="demo-glitch-text" data-text="GLITCH">GLITCH</div>
.demo-glitch-text {
font-size: 64px;
font-weight: 900;
text-transform: uppercase;
color: #fff;
position: relative;
}
.demo-glitch-text::before,
.demo-glitch-text::after {
content: attr(data-text);
position: absolute;
top: 0; left: 0;
}
/* Красный слой */
.demo-glitch-text::before {
color: #ff3333;
animation: glitch-text-top 3s steps(1) infinite;
z-index: -1;
}
/* Синий слой */
.demo-glitch-text::after {
color: #3333ff;
animation: glitch-text-bottom 3s steps(1) infinite;
z-index: -1;
}
@keyframes glitch-text-top {
0%, 19%, 58%, 100% {
clip-path: inset(0 0 80% 0);
transform: translate(0);
opacity: 0;
}
15% {
clip-path: inset(10% 0 60% 0);
transform: translate(-4px, -2px);
opacity: 1;
}
57% {
clip-path: inset(5% 0 70% 0);
transform: translate(5px, -1px);
opacity: 1;
}
}
Текст появляется посимвольно, словно его набирают в реальном времени. Мигающий курсор справа усиливает иллюзию. Приём хорошо работает для заголовков, цитат и коротких фраз, где последовательное появление букв создаёт ритм чтения и удерживает внимание.
ОбъяснениеЭффект достигается анимацией ширины элемента от нуля до полного размера. Текст уже присутствует в разметке, но скрыт за счёт overflow: hidden и width: 0. Через @keyframes ширина увеличивается до 100%, и буквы «появляются» слева направо.
Тайминг-функция steps() делает появление дискретным, а не плавным. Количество шагов должно совпадать с количеством символов в тексте, чтобы каждый шаг открывал ровно одну букву. Для строки из 12 символов используйте steps(12).
Курсор реализуется через border-right на том же элементе. Отдельная анимация мигания переключает border-color между видимым и прозрачным состоянием с помощью steps(1).
<div class="demo-typewriter-text">Web-poster·HSE</div>
.demo-typewriter-text {
font-family: 'Courier New', monospace;
font-size: 32px;
font-weight: 700;
color: #fff;
white-space: nowrap;
overflow: hidden;
border-right: 3px solid #fff;
width: 0;
animation:
typewriter-reveal 3s steps(14) infinite,
typewriter-cursor 0.6s steps(1) infinite;
}
/* steps(14) — по числу символов в тексте */
@keyframes typewriter-reveal {
0% { width: 0; }
50% { width: 14ch; }
95% { width: 14ch; }
100% { width: 0; }
}
@keyframes typewriter-cursor {
0%, 100% { border-color: #fff; }
50% { border-color: transparent; }
}
Важное ограничение заключается в том, что эффект корректно работает только с моноширинными шрифтами, где каждый символ занимает одинаковую ширину. С пропорциональными шрифтами шаги будут неравномерными, и иллюзия посимвольного набора сломается.
Буквы выстраиваются по окружности, формируя круговую надпись. Каждый символ повёрнут на свой угол относительно общего центра. Приём часто встречается в декоративных элементах веб-плакатов, таких как печати, эмблемы, или медленно вращающихся надписей на фоне.
ОбъяснениеКаждая буква оборачивается в отдельный span с position: absolute. Все спаны размещаются в контейнере с position: relative, из центра которого строится окружность.
На каждый span применяется transform: rotate(Ndeg) translateY(-Rpx), где N — угол поворота буквы, а R — радиус окружности. Для 12 букв шаг составляет 30° (360° / 12). Первая буква получает rotate(0deg), вторая rotate(30deg), третья rotate(60deg)и так далее.
Обратите внимание на порядок трансформаций. rotate идёт первым, потому что он поворачивает систему координат элемента, и последующий translateY сдвигает букву вверх относительно уже повёрнутой оси, что и выстраивает её на нужную позицию окружности.
Для вращения всей конструкции достаточно одной анимации rotate на родительском контейнере. Отдельные буквы не анимируются и остаются на своих местах.
<div class="demo-circular-wrap">
<span class="demo-circular-letter">В</span>
<span class="demo-circular-letter">Е</span>
<span class="demo-circular-letter">Б</span>
<span class="demo-circular-letter">·</span>
<span class="demo-circular-letter">П</span>
<span class="demo-circular-letter">Л</span>
<span class="demo-circular-letter">А</span>
<span class="demo-circular-letter">К</span>
<span class="demo-circular-letter">А</span>
<span class="demo-circular-letter">Т</span>
<span class="demo-circular-letter">·</span>
<span class="demo-circular-letter">★</span>
</div>
.demo-circular-wrap {
position: relative;
animation: circular-spin 12s linear infinite;
}
.demo-circular-letter {
position: absolute;
font-size: 18px;
font-weight: 700;
color: #fff;
text-transform: uppercase;
width: 20px;
margin-left: -10px;
text-align: center;
}
/* 12 букв, шаг 30° (360/12), радиус 100px */
.demo-circular-letter:nth-child(1) { transform: rotate(0deg) translateY(-100px); }
.demo-circular-letter:nth-child(2) { transform: rotate(30deg) translateY(-100px); }
.demo-circular-letter:nth-child(3) { transform: rotate(60deg) translateY(-100px); }
.demo-circular-letter:nth-child(4) { transform: rotate(90deg) translateY(-100px); }
.demo-circular-letter:nth-child(5) { transform: rotate(120deg) translateY(-100px); }
.demo-circular-letter:nth-child(6) { transform: rotate(150deg) translateY(-100px); }
.demo-circular-letter:nth-child(7) { transform: rotate(180deg) translateY(-100px); }
.demo-circular-letter:nth-child(8) { transform: rotate(210deg) translateY(-100px); }
.demo-circular-letter:nth-child(9) { transform: rotate(240deg) translateY(-100px); }
.demo-circular-letter:nth-child(10) { transform: rotate(270deg) translateY(-100px); }
.demo-circular-letter:nth-child(11) { transform: rotate(300deg) translateY(-100px); }
.demo-circular-letter:nth-child(12) { transform: rotate(330deg) translateY(-100px); }
@keyframes circular-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
Радиус окружности подбирайте в зависимости от количества букв и размера шрифта. Если буквы наползают друг на друга, увеличьте значение translateY. Для длинных слов или фраз можно уменьшить кегль или увеличить радиус. Попробуйте также расставить буквы не равномерно, а с разным шагом для создания более свободной, органичной композиции