Народ, всем привет. Сегодня у нас больше статья будет для начинающих ребят, кто пробует себя в верстке сайтов, учиться писать первые html-страницы, или кому просто интересен мир фронтенда. И поговорим мы про красивые цветные буквы, заголовки и прочее. А в частности, как можно поменять цвет букв и текста при помощи CSS. И казалось бы, что тут сложного.
Однако, мне часто прилетает один и тот же вопрос – как сделать цвет букв красивее, с градиентом, разноцветный и все такое прочее.
И я сталкивался с тем, что люди просто идут и рисуют буквы в Фотошопе и вставляют их картинкой. И да, это тоже вариант, и какие-то интересные шрифты, цвета и графику можно делать и так. Но если вам нужно просто сделать красивые простые буквы, как на картинке ниже, то все это можно сделать гораздо проще.
1. Три простых способа
Самый простой способ задать цвет тексту, это прописать в его теге стиль для текста. Причем делается это довольно просто:
<span style="color: red;"> Пример текста </span>
Само собой лучше всего вынести стили в <head>, прописать стиль для отельного класса, а после применить его к тексту. А еще самом собой лучше вынести стили в отдельный файл.
.red-txt {
color: blue;
}
<span class="red-txt"> Пример текста </span>
2. Как можно назначать цвет
Для начала стоит напомнить, что свойство color является наследуемым, что означает, что дочерние элементы наследуют цвет текста от своих родительских элементов, если оно не переопределено у них самих. Поэтому его можно задать самому верхнему элементу, прописать в root и т.д., и дальше «не заморачиваться». А сам по себе цвет можно задать несколькими способами:
- во-первых, прописать словами, по типу red, blue и т.д. хз не так много, но они затрагивают все основные цвета. Плюс есть свойства transparent, которое означает полностью прозрачный цвет, а также currentColor - используется для определения текущего цвета элемента.
- color: rgb(0, 191, 255) — RGB, модель цвета, основанная на комбинации красного, зелёного и синего цветов.
- color: rgba(0, 191, 255, 0,5) - расширение RGB, которое, кроме трёх цветов, включает значение прозрачности.
- color: HSL(0, 100%, 50%) и hsla(0, 100%, 50%, 0.5) - модель цвета, основанная на оттенке — hue, насыщенности — saturation и яркости — lightness цвета + прозрачность.
- color: #FF0000 – ну и старичок, основанный на шестнадцатеричном коде цвета
Кстати, Вам может быть это интересно:
3. Градиент цвета
Ну и подходим к самому интересному, градиенту и как «разукрасить» надпись, заголовок или текст интересно и красочно. И для начала нужно вспомнить, что можно прописывать переменные. Так будет проще, да и на практике, если у вас на сайте 2-3 ключевых цвета, чтобы их каждый раз не прописывать, проще сдедать их переменными и использовать там, где надо.
:root {
--color-1: #186cb8;
--color-2: #2a9a9f;
--color-3: #f1b211;
--color-4: #e83611;
--color-5: #f9002f;
}
Далее берем простой блок, скажем colortext и прописываем ему стили (фон и делаем ему гридовскую сетку, чтобы название было по центру, но это не суть)
. colortext {
background: #000;
line-height: 1;
display: grid;
place-items: center;
}
Теперь прописывает стили для заголовка, для начала ничего особо интересного, стандартные свойства:
h1 {
font-family: sans-serif;
font-size: 15vw;
font-weight: 900;
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;
}
Что по итогу мы сделали:
- использовали простой линейный градиент + повернули его немного по диагонали.
- сделаем градиент, не плавным, а резким, чтобы был эффект полосок.
- чтобы сделать эффект «разрыва», ширина каждой полоски будет 19%, а один процент оставим на зазор между ними (так как фон черный, полоски будут черными)
- чтобы полоски градиента были видны только на тексте, обрежем этот градиент по контуру букв, ведь градиент устанавливается не на сами буквы, а как бы на фон за ними.
- а чтобы буквы стали цветными, установим им прозрачный цвет — через него станет виден как раз фон позади с градиентом.