Сегодня встала задача на сайте клиента сделать цвет заголовка градиентом. Учитывайте, что Градиент для текста не поддерживается всеми браузерами - работает только в браузерах на основе WebKit-движка.Но это не мешает нам использовать этот прием. Для остальных браузеров просто зададим обычный цвет.Работать будет везде, просто на Webkit-браузерах с градиентом, а на остальных - без.
Что пишем:
background: linear-gradient(90deg, #ff8378, #ffb68a);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
color: #ff8378;
background: linear-gradient(90deg, #ff8378, #ffb68a);
90deg - угол поворота градиента.
Нам нужно, чтобы градиент был слева-направо. Поэтому ставим угол 90 градусов.
Далее задается цвет 1 (который слева), цвет 2 (который справа)
background-clip: border-box; -webkit-background-clip: text
Обрезает любой фон (в том числе градиентный) по границе текста.
-webkit-text-fill-color: transparent;
Делает буквы текста прозрачными - нужно для того, чтобы градиентный фон проглядывал через текст.
color: #ff8378;
Основной цвет шрифта - для не WebKit-браузеров. Там где градиент не поддерживается
Все. Спасибо за прочтение.
Мы охотно делимся полезной информацией по разработке сайтов и продажам на нашем сайте madwww.ru и канале Дзен.