Допустим, вы фронтенд и вам дали задание раскрасить текст на сайте в разные цвета. Стандартный способ — обернуть отдельные куски текста в <span></span> и задать этим тегам классы или стили. Но тогда мы получим ровно то, что предполагалось — покрашенные слова и предложения.
А что, если покраска не должна быть связана со словами? Например, если нужно покрасить текст по диагонали или сделать так, чтобы через буквы просвечивалась картинка? Оказывается, это тоже можно сделать довольно просто. Сейчас за 10 минут разложим вот такую красоту.
Чтобы полностью врубиться в эту технику, читайте комментарии в коде. Всё станет понятно.
Готовим страницу
Так как вся магия будет происходить в CSS-файле, то всё, что нам нужно сделать, — это добавить на страницу блок с заголовком и подключить файл со стилями:
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>Разноцветный текст на CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- блок, в котором происходит магия цвета -->
<div class="colored">
<!-- обычный заголовок -->
<h1>Привет, это журнал «Код»</h1>
</div>
</body>
</html>
Настраиваем стили
Чтобы можно было быстро менять и подбирать цвета для раскрашивания, сделаем их переменными в CSS:
/* задаём глобальные переменные для цветов, в которые будем окрашивать текст */
:root {
--color-1: #186cb8;
--color-2: #2a9a9f;
--color-3: #f1b211;
--color-4: #e83611;
--color-5: #f9002f;
}Теперь зададим параметры блока, внутри которого лежит наш текст. В нём всё просто и предсказуемо:
/* настройки блока с текстом */
.colored {
/* фон */
background: #000;
/* межстрочное расстояние */
line-height: 1;
/* подключаем сетку */
display: grid;
/* ставим содержимое в центр */
place-items: center;
}Добавляем ту самую раскраску, о которой мы говорили в самом начале. Чтобы цвета были лучше видны, сделаем шрифт заголовка побольше и пожирнее, а перенос текста по строкам сделаем по длине самого длинного слова.
h1 {
/* настраиваем внешний вид шрифта */
font-family: sans-serif;
font-size: 15vw;
font-weight: 900;
/* подстраиваем ширину заголовка под самое длинное слово*/
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
/* делаем автоматические отступы */
margin: auto;
/* переводим все буквы в заглавные */
text-transform: uppercase;
}Последнее, что осталось сделать, — наложить цвета поверх текста. Сделаем это так:
- Используем линейный градиент и повернём его для красоты по диагонали.
- Градиент — это переход от одного цвета к другому.
- Чтобы были цветные полосы, сделаем не плавный градиент, а полосками.
- Ширина каждой полоски будет 19%, а один процент оставим на зазор между ними.
- Чтобы полоски градиента были видны только на тексте, обрежем этот градиент по контуру букв.
- А чтобы буквы стали цветными, установим им прозрачный цвет — через него станет виден наш градиент.
Добавим это к стилям заголовка h1:
/* делаем цветные полосы по тексту */
background: linear-gradient(219deg,
var(--color-1) 19%,
transparent 19%,transparent 20%,
var(--color-2) 20%, var(--color-2) 39%,
transparent 39%,transparent 40%,
var(--color-3) 40%,var(--color-3) 59% ,
transparent 59%,transparent 60%,
var(--color-4) 60%, var(--color-4) 79%,
transparent 79%, transparent 80%,
var(--color-5) 80%);
/* обрезаем фон по контуру букв */
background-clip: text;
-webkit-background-clip: text;
/* делаем заголовок прозрачным, чтобы был виден цветной фон */
color: transparent;Что дальше
Таким приёмом можно раскрасить любой текст в любые цвета. Но можно пойти дальше и положить фото под текст, чтобы картинка проступала сквозь буквы. Этим займёмся в другой раз.
Посмотреть на градиенты на странице проекта.
<!DOCTYPE html>
<html lang="ru" >
<head>
<meta charset="UTF-8">
<title>Разноцветный текст на CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- блок, в котором происходит магия цвета -->
<div class="colored">
<!-- обычный заголовок -->
<h1>Привет, это журнал «Код»</h1>
</div>
</body>
</html>/* задаём глобальные переменные для цветов, в которые будем окрашивать текст */
:root {
--color-1: #186cb8;
--color-2: #2a9a9f;
--color-3: #f1b211;
--color-4: #e83611;
--color-5: #f9002f;
}
/* настройки блока с текстом */
.colored {
/* фон */
background: #000;
/* межстрочное расстояние */
line-height: 1;
/* подключаем сетку */
display: grid;
/* ставим содержимое в центр */
place-items: center;
}
h1 {
/* настраиваем внешний вид шрифта */
font-family: sans-serif;
font-size: 15vw;
font-weight: 900;
/* подстраиваем ширину заголовка под самое длинное слово*/
width: -webkit-min-content;
width: -moz-min-content;
width: min-content;
/* делаем автоматические отступы */
margin: auto;
/* переводим все буквы в заглавные */
text-transform: uppercase;
/* делаем цветные полосы по тексту */
background: linear-gradient(219deg,
var(--color-1) 19%,
transparent 19%,transparent 20%,
var(--color-2) 20%, var(--color-2) 39%,
transparent 39%,transparent 40%,
var(--color-3) 40%,var(--color-3) 59% ,
transparent 59%,transparent 60%,
var(--color-4) 60%, var(--color-4) 79%,
transparent 79%, transparent 80%,
var(--color-5) 80%);
/* обрезаем фон по контуру букв */
background-clip: text;
-webkit-background-clip: text;
/* делаем заголовок прозрачным, чтобы был виден цветной фон */
color: transparent;
}
