Хорошо известна функция linear-gradient, используемая для background. Нельзя ли её применить для оформления текста?
Как оказывается, такая возможность есть. Реализуется она с помощью атрибутов -webkit-. Нужно установить текст в качестве маски контейнера и сделать его прозрачным.
|
1 2 |
-webkit-background-clip: text; -webkit-text-fill-color: transparent; |
К примеру, у нас есть текст ‘The Fancy Title’, применим к нему линейный градиент:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style> div.wrapper { background: linear-gradient(15deg, red, yellow, green, blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-weight: bold; font-size: 32px; } </style> <div class="wrapper">The fancy title</div> |
Свойство display: inline-block не обязательно, но иначе контейнер будет занимать всю ширину, и тогда мы не увидим всего спектра градиента. Получится что то вроде:
По большому счету и -webkit-text-fill-color: transparent; нам не нужен, так как можно использовать и color: transparent;
Данные -webkit- атрибуты хорошо поддерживаются браузерами. Если не брать в расчет IE, который более не поддерживается Microsoft (в пользу Edge), то работает это на всех основных платформах.