Цвет текста градиентом css

Цвет текста градиентом css

Для создания эффектных текстовых заголовков можно использовать градиент, который будет отображаться исключительно внутри букв. Ниже рассмотрим два способа добавления градиента к тексту, а также их плюсы и минусы.

Использование mix-blend-mode

Свойство mix-blend-mode определяет режим наложения цвета текста на фоновый цвет. Подобные режимы наложения можно увидеть в графических редакторах вроде Photoshop, соответственно, идея наложения и названия режимов позаимствованы оттуда.

Перед применением этого метода текст надо обернуть в какой-нибудь элемент (

и др.) и установить для него родителя. Мы сделаем такую структуру:

для текста.

ставим белый цвет фона и свойство 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 позволяет установить цвет фона, в том числе градиент или картинку, только для текста. Градиент теперь применяем непосредственно к текстовому элементу (

в нашем случае) и включаем свойство -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 свойств:

  • color: transparent; – задает прозрачный цвет шрифта.
  • background-clip: text; – окрашивает текст в цвет или изображение указанного в background-image .
  • background-image: linear-gradient или background-image: radial-gradient – задает градиент.

Свойство background-clip: text находится в стадии разработки и поддерживается некоторыми современными браузерами только с префиксом -webkit- .

Градиентный текст для браузеров Webkit

Переход от одного цвета в другой происходит для всего блока, но отображается только на месте букв.

Использование background-clip: text; в ближайшем будущем возможно только в паре с директивой @supports. Потому что даже если его поддержат остальные браузеры, в старых версиях человек не различит ни буквы.

Картинка прозрачна в тех местах, где нет текста

Только если текст стоит на чёрном (darken) или белом (lighten) фоне (автор).

Разноцветный градиент

Картинка как фон у текста

Внимание: примечателен пример из комментария 11 после статьи.

Градиент у текста для остальных браузеров

Поверх блока можно наложить ещё один полупрозрачный слой того же цвета, что и фон, только не стоит применять transparent.

Заполняющийся текст

Пробегающий по буквам блик

На мой вкус, лучше анимацией сделать как у Сбербанка.

Ссылка на основную публикацию
Характеристики процессора интел пентиум 4
Количество ядер - 1. Благодаря технологии Hyper-Threading, количество потоков 2, что вдвое больше числа физических ядер и увеличивает производительность многопоточных...
Сканер ricoh sp 220snw
Компания Ricoh — далеко не новичок на рынке печатающих устройств. Это глобальная корпорация со штаб-квартирой в Токио и представительствами во...
Сколько дают на ютубе за 1000 просмотров
Многих пользователей YouTube, а также начинающих видеоблогеров справедливо интересует вопрос: «А сколько YouTube платит за тысячу или миллион просмотров?» Если...
Хлебопечка мулинекс ow1101 инструкция и рецепты
Инструкция MOULINEX OW 1101 на русском языке в формате pdf для устройства: хлебопечь. Прочитайте инструкцию для ознакомления с функциями и...
Adblock detector