Заголовки должны быть большими, жирными и громкими, чтобы привлекать внимание пользователя за несколько секунд. Мы перевели статью о стилях заголовков, сегодня предлагаем изучить градиенты.   В заголовках обычно содержится текст, набранный крупным шрифтом, выделенный начертанием или цветом. К нему иногда прилагается описательный подзаголовок, изображения и кнопки призыва к действию. Текст основного заголовка обозначается тегом h1, его стилизацией мы и займёмся. Если работаете с брендбуком, сосредоточьтесь на фирменных цветах. Если инструкций нет, сначала подберите сочетающиеся цвета, потом приступайте к оформлению. Тест и стиль должны быть уникальными. На одной веб-странице нужен только один тег h1 — это ради SEO и производительности, особенно если у заголовка сложный стиль. Между визуальным хаосом и хорошим заголовком — тонкая грань, которую пересекают размер, цвет, начертание и гарнитура шрифта. Поэтому иногда творческие порывы надо притормаживать. Градиент — цветовой переход между цветами, при котором они смешиваются. Есть три способа добавить цветовые градиенты к тексту заголовка CSS: linear-gradient() radial-gradient() conic-gradient() Функция обеспечивает переход цвета по прямой линии. Сделаем для старта заголовок в HTML: Используйте семантический тег header, как показано, тег section с ID или проверенный  с class="header". Главное, чтобы заголовок был заметным и узнаваемым. Функция linear-gradient() позволяет добавлять специфические параметры, в том числе направление градиента и как минимум два значения цвета. Но можно добавлять больше — количество цветов не ограничено. Посмотрим на CSS: Свойство background-clip гарантирует, что фон не выйдет за пределы элемента — в данном случае это текста. Свойство color установлено как transparent, так что фон видно прямо за заголовком. Результат кода: светлый цвет перетекает в тёмный слева направо: Стилизовать заголовок с градиентом можно в других направлениях: Градиент может быть и диагональным: Направление можно указать с помощью углов: Начало перехода цвета можно задать, добавив процентное значение после первого цвета. Фиолетовый занимает 45% текста заголовка, а потом переходит в красный: Радиальный градиент начинается в исходной точке, из которой расходятся цвета. По умолчанию переход цвета начинается из центра элемента. Указать направление с помощью radial-gradient() нельзя, но зато можно указать форму: круг или эллипс. Для изменения положения градиента есть четыре параметра: closest-side closest-corner farthest-side farthest-corner Этот градиент тоже начинается с исходной точки. Вокруг неё вращается цветовой переход. Для наглядности добавим к заголовку третий цвет. Результат: Грубую начальную точку, где бирюзовый переходит в фиолетовый на букве n, можно сгладить. Для этого добавим первый цвет в конец функции. После цветов можно добавить процентные значения, чтобы контролировать точки начала цветовых переходов. Итог: Функцию можно использовать, чтобы сделать градиент, который градиентом не будет. Первый цвет перемещается от начальной точки  0% и проворачивается на 33% заголовка. В этой точке должен начаться цветовой переход, но начальная точка следующего цвета была 33%, поэтому цвет меняется сразу. Как можно понять, градиент цвета текста повторяется по всему заголовку. Добавим цветовые точки, получим градиентные узоры. Даже если вы не собираетесь вызывать у пользователей головокружение, учитесь использовать градиенты. Чтобы получить паттерн repeating-radial, используем такой синтаксис: Теперь поменяем красный на светло-фиолетовый: Итог: Используйте не только оттенки одного цвета. Жёлтый хорошо сочетается с оранжевым,  а зелёный — с синим. Помните четыре параметра для radial-gradient? Посмотрим ещё. Градиенту можно задать форму circle или ellipse. По умолчанию это ellipse с положением в центре. Размер фигуры можно определить с помощью параметров: closest-side — форму градиента определяет ближайшая к центру стороной элемента; closest-corner — форму градиента определяет ближайший угол элемента; farthest-side —форму градиента определяет сторона элемента, удалённая от центра; farthest-corner — форму градиента определяет удалённый от центра угол. Далее идёт позиция от corner или side. Это может быть процентное значение или длина. Используйте минимум два цвета, но помните, что повторение первого в качестве третьего даёт плавный переход. Для ясности используем красный и фиолетовый: Вот что получится при repeating-radial-gradient использовании значений closest-: А теперь при использовании значений farthest-: Между двумя первыми заголовками нет большой разницы, потому что градиент расходится из центра наружу. Тот же результат можем получить, используя linear-gradient. Лучше указать форму и определить точки цветовых переходов. Видно, что свойство repeating-radial-gradient со значением closest-side или closest-corner выглядит ярче, но снижает читаемость, если использовать неподходящие цвета. Значения farthest-corner или farthest-side позволяют получить чёткий текст даже с контрастными цветами.  Платформа профессионального роста