Для создания эффектных текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Ниже рассмотрим два способа добавления градиента к тексту, а также их плюсы и минусы.
Использование mix-blend-mode
Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.
Перед применением этого метода текст надо обернуть в какой-нибудь элемент (
и др.) и установить для него родителя. Мы сделаем такую структуру:
для текста.
ставим белый цвет фона и свойство mix-blend-mode со значением screen (пример 1).
Пример 1. Свойство mix-blend-mode
Результат данного примера показан на рис. 1.
Рис. 1. Градиентный текст
Минусы
Плюсы
-webkit-text-fill-color нужен для того, чтобы убрать исходный цвет у самого текста, без этого свойства метод работать не будет (пример 2).
Результат данного примера показан на рис. 2.
Рис. 2. Градиентный текст
Минусы
Плюсы
Таким образом, для фона веб-страницы, отличного от белого, подходит исключительно второй метод. Если же у вас белый цвет фона, то лучше использовать первый метод, поскольку в нём применяются стандартные свойства, которые будут поддерживаться браузерами и в дальнейшем.
Пропишем линейный градиент для заголовка. Этот градиент плавно перемещается по прямой снизу вверх, от розового цвета к голубому. Для построения красивых градиентов не нужно держать в голове все эти комбинации кода. Сейчас существуют генераторы градиентов, например webgradiets.
Но, никакого чуда не произошло и градиент применился к фону блока, внутри которого приписан текст.
Как задать градиент для самого заголовка? Существует такое CSS свойство, как background-clip. После применения данного свойства (обязательно с префиксом) со значением text, фон окрасится цвет в цвет заголовка, в нашем случае в белый цвет. Таким образом данное свойство применится только к тесту.
.title < -webkit-background-clip: text; >
Почему же заголовок снова стал белым? На самом деле градиент есть, только мы его не видим из-за белого цвета у заголовка. Поменяем цвет заголовка на прозрачный, через специальное свойство text-fill-color (с префиксом -webkit).
.title < -webkit-text-fill-color: transparent; >
И последнее, заменим белый цвет на один из цветов градиента на случай, если специфичные градиентные свойства не сработают в других браузерах. Далеко не все браузеры поддерживают эти новшества. Поэтому для корректного отображения цвета текста (максимально приближенного к макету сайта), мы и добавляем дополнительный цвет. На момент написания статьи, свойство text-fill-color не поддерживается только IE11 из числа более-менее современных браузеров.
На современных браузерах мы получим текст с градиентом, а на старых браузерах однотонный цвет, наиболее подходящий под фон сайта.
Если (текстовые) градиенты являются большой частью вашего брендинга, вы можете разделить эту функцию на две части: класс, который отображает ваш градиент как обычный фоновый рисунок, и другой класс для закрепления любого фона в этом тексте.
Это позволяет вам легко делать две вещи:
1. Добавьте один и тот же градиент или шаблон как в текст, так и в качестве фона для обычных элементов. 2. Создавайте различные наложения текста без необходимости повторять свойства отсечения.
На этом все!
Страна: (RU)
ZorNet.Ru — сайт для вебмастера
Градиентный текст при наведении
Некоторое время я искал, как создать эффект перехода при наведении градиента на текст, но не смог найти решение. Поэтому здесь я использую режим смешивания для отображения текста. Тогда у div позади него будет градиент, где установлен div на width: 0%, затем на hover width: 100%, чтобы он выглядел так, как будто к тексту применен градиент.
Как легко создавать текстовые градиенты с помощью CSS
От автора: градиент — это переход цветов от начальной и конечной точке, а линейный градиент постепенно перемещается по прямой к другому цвету. Градиенты — это последняя тенденция в наши дни, и большинство веб-сайтов создаются с использованием градиентов. Благодаря свойству CSS background-clip очень легко реализовать градиенты для текста.
Синтаксис: как создавать текстовые градиенты
Во-первых, мы должны настроить шрифт, используя h1 или любой тег по нашему выбору, и поместить его в желаемое место. Я разместил свой шрифт в центре, используя flexbox.
Результат может быть достигнут с помощью:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
1. Свойство linear-gradient()
Как объяснялось выше, это свойство создает для текстового блока фоновый линейный градиент. В CSS linear-gradient реализуется с помощью:
Градиент у текста | CSS
Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports. Потому что даже если его поддержат остальные браузеры, в старых версиях человек не различит ни буквы.
Картинка прозрачна в тех местах, где нет текста
Только если текст стоит на чёрном (darken) или белом (lighten) фоне (автор).
Разноцветный градиент
Картинка как фон у текста
Внимание: примечателен пример из комментария 11 после статьи.
Градиент у текста для остальных браузеров
Поверх блока можно наложить ещё один полупрозрачный слой того же цвета, что и фон, только не стоит применять transparent.
Текст с градиентом
Градиент в цвет шрифта можно добавить с помощью следующих CSS свойств:
CSS-градиенты — это функция, которая была введена относительно недавно, а это означает, что старые версии браузеров могут не распознавать и не поддерживать их.
Линейные градиенты
linear gradient CSS плавно переводит один цвет в другой по прямой линии. Синтаксис следующий:
Замените цвет 1 и цвет 2 обозначениями цветов по своему выбору: распознаваемое имя цвета или шестнадцатеричный код. А затем разделите два цвета запятой.
Этот код создает вертикальный градиент, который начинается с цвета 1 вверху и переходит в цвет 2 внизу. Это выглядит примерно так:
Различные варианты
Направления градиента
Направление градиента, используемое по умолчанию, сверху вниз. Объявляя направления перед тем, как указывать браузеру цвета, можно определить, каким образом будет распределяться градиент.
Есть несколько способов, с помощью которых это можно сделать. Три приведенных выше градиента были созданы с помощью следующего кода:
Диагональные градиенты можно создавать, указывая, в каком углу начинается или заканчивается градиент, например, top left или bottom right — две стороны разделяются пробелом. Это тот случай, когда для браузеров нужно предоставлять немного различающиеся инструкции:
Несколько переходов цветов
Чтобы получить многоцветный градиент, укажите более двух цветов в нужном порядке, разделяя их запятыми. Вот CSS-код для приведенного на рисунке выше CSS background linear gradient :
Также можно указать, где вы хотите разместить переходы цветов, добавив после цвета значение в процентах или пикселях через пробел. Например, я создал градиент, в котором красный цвет начинает переходить в желтый на 30% ширины, а затем желтый переходит в зеленый на 70% ширины:
Так как я не указал, где должен закончиться последний цвет, он по умолчанию заканчивается на 100% или в самом конце градиента.
Также можно указать точки перехода с использованием пикселей вместо процентов ( например: #c94A4a 100px ). Но не используйте и пиксели, и проценты в одной строке кода.
Радиальные градиенты
Если задать радиальный CSS gradient внутри фигуры, которая не является кругом, градиент будет корректироваться так, чтобы внешний цвет заканчивался по краям фигуры равномерно:
Пожалуйста, оставляйте ваши мнения по текущей теме статьи. За комментарии, лайки, дизлайки, подписки, отклики низкий вам поклон!
Пожалуйста, оставляйте свои мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, подписки, отклики, дизлайки, лайки!
