Стили заголовков в CSS: градиенты
Заголовки должны быть большими, жирными и громкими, чтобы привлекать внимание пользователя за несколько секунд. Мы перевели статью о стилях заголовков, сегодня предлагаем изучить градиенты.
В заголовках обычно содержится текст, набранный крупным шрифтом, выделенный начертанием или цветом. К нему иногда прилагается описательный подзаголовок, изображения и кнопки призыва к действию.
1 — заголовок, 2 — описание, 3 — изображение, 4 — кнопки
Текст основного заголовка обозначается тегом h1 , его стилизацией мы и займёмся.
Полезные подсказки
Выбирайте правильные цвета
Если работаете с брендбуком, сосредоточьтесь на фирменных цветах. Если инструкций нет, сначала подберите сочетающиеся цвета, потом приступайте к оформлению.
Делайте заголовок уникальным
Тест и стиль должны быть уникальными. На одной веб-странице нужен только один тег h1 — это ради SEO и производительности, особенно если у заголовка сложный стиль.
Выбирайте правильные шрифты
Между визуальным хаосом и хорошим заголовком — тонкая грань, которую пересекают размер, цвет, начертание и гарнитура шрифта. Поэтому иногда творческие порывы надо притормаживать.
CSS градиенты цвета текста
Градиент — цветовой переход между цветами, при котором они смешиваются. Есть три способа добавить цветовые градиенты к тексту заголовка CSS:
1. linear-gradient()
Функция обеспечивает переход цвета по прямой линии. Сделаем для старта заголовок в HTML:
Используйте семантический тег header , как показано, тег section с ID или проверенный [div] с class=»header» . Главное, чтобы заголовок был заметным и узнаваемым.
Функция linear-gradient() позволяет добавлять специфические параметры, в том числе направление градиента и как минимум два значения цвета. Но можно добавлять больше — количество цветов не ограничено. Посмотрим на CSS:
Свойство background-clip гарантирует, что фон не выйдет за пределы элемента — в данном случае это текста. Свойство color установлено как transparent , так что фон видно прямо за заголовком. Результат кода: светлый цвет перетекает в тёмный слева направо:
Линейный градиент текста слева направо
Стилизовать заголовок с градиентом можно в других направлениях:
Линейные градиенты текста с разными направлениями
Градиент может быть и диагональным:
Направление можно указать с помощью углов:
Линейный градиент по диагонали
Начало перехода цвета можно задать, добавив процентное значение после первого цвета. Фиолетовый занимает 45% текста заголовка, а потом переходит в красный:
Линейный градиент с процентами
2. radial-gradient()
Радиальный градиент начинается в исходной точке, из которой расходятся цвета. По умолчанию переход цвета начинается из центра элемента.
Указать направление с помощью radial-gradient() нельзя, но зато можно указать форму: круг или эллипс.
Радиальный градиент
Для изменения положения градиента есть четыре параметра:
3. conic-gradient()
Этот градиент тоже начинается с исходной точки. Вокруг неё вращается цветовой переход. Для наглядности добавим к заголовку третий цвет.
Пример конического градиента
Грубую начальную точку, где бирюзовый переходит в фиолетовый на букве n, можно сгладить. Для этого добавим первый цвет в конец функции.
После цветов можно добавить процентные значения, чтобы контролировать точки начала цветовых переходов.
Функцию можно использовать, чтобы сделать градиент, который градиентом не будет.
Первый цвет перемещается от начальной точки 0% и проворачивается на 33% заголовка. В этой точке должен начаться цветовой переход, но начальная точка следующего цвета была 33%, поэтому цвет меняется сразу.
Бонус: повторяющиеся градиенты
Как можно понять, градиент цвета текста повторяется по всему заголовку. Добавим цветовые точки, получим градиентные узоры.
Даже если вы не собираетесь вызывать у пользователей головокружение, учитесь использовать градиенты.
Используйте оттенки одного цвета
Чтобы получить паттерн repeating-radia l, используем такой синтаксис:
Теперь поменяем красный на светло-фиолетовый:
Используйте не только оттенки одного цвета. Жёлтый хорошо сочетается с оранжевым, а зелёный — с синим.
Используйте правильные параметры
Помните четыре параметра для 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 позволяют получить чёткий текст даже с контрастными цветами.
Градиентный текст
Для создания эффектных текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Ниже рассмотрим два способа добавления градиента к тексту, а также их плюсы и минусы.
Использование mix-blend-mode
Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.
Перед применением этого метода текст надо обернуть в какой-нибудь элемент ( <p> , <span> , <div> , <h2> и др.) и установить для него родителя. Мы сделаем такую структуру: <div> в качестве родителя; <h2> для текста.
Теперь для <div> устанавливаем желаемый градиент через свойство background , а для <h2> ставим белый цвет фона и свойство mix-blend-mode со значением screen (пример 1).
Пример 1. Свойство mix-blend-mode
Результат данного примера показан на рис. 1.
Рис. 1. Градиентный текст
Минусы
- Метод годится только для белого фона веб-страницы, в остальных случаях градиент будет виден не только на тексте.
- К тексту добавляется дополнительный родительский элемент.
- Не поддерживается в браузерах IE и Edge. Однако в связи с переходом Edge на движок Chromium скоро начнёт поддерживать.
Плюсы
- Градиентом легко управлять через стили.
- Вместо градиента можно подставить изображение, заменив linear-gradient на значение url(image/bg.png) .
Использование -webkit-background-clip
Нестандартное свойство -webkit-background-clip со значением text позволяет установить цвет фона, в том числе градиент или картинку, только для текста. Градиент теперь применяем непосредственно к текстовому элементу ( <h2> в нашем случае) и включаем свойство -webkit-background-clip , а также -webkit-text-fill-color со значением transparent .
-webkit-text-fill-color нужен для того, чтобы убрать исходный цвет у самого текста, без этого свойства метод работать не будет (пример 2).
Пример 2. Свойство -webkit-background-clip
Результат данного примера показан на рис. 2.
Рис. 2. Градиентный текст
Минусы
- Мы используем нестандартные свойства, работу которых никто не гарантирует в будущем.
- Не поддерживается браузером IE.
Плюсы
- Градиентом легко управлять через стили.
- Вместо градиента можно подставить изображение, заменив linear-gradient на значение url(image/bg.png) .
- Поддерживается браузером Edge.
- Метод годится для любого фона веб-страницы.
- Не используются дополнительные элементы.
Таким образом, для фона веб-страницы, отличного от белого, подходит исключительно второй метод. Если же у вас белый цвет фона, то лучше использовать первый метод, поскольку в нём применяются стандартные свойства, которые будут поддерживаться браузерами и в дальнейшем.
Как легко создавать текстовые градиенты с помощью CSS
От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста.
Синтаксис: как создавать текстовые градиенты
Во-первых, мы должны настроить шрифт, используя h1 или любой тег по нашему выбору, и поместить его в желаемое место. Я разместил свой шрифт в центре, используя flexbox.
Результат может быть достигнут с помощью:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
1. Свойство linear-gradient()
Как объяснялось выше, это свойство создает для текстового блока фоновый линейный градиент. В CSS linear-gradient реализуется с помощью: