Использование CSS градиента цвета для текста

Хорошо известна функция linear-gradient, используемая для background. Нельзя ли её применить для оформления текста?

Как оказывается, такая возможность есть. Реализуется она с помощью атрибутов -webkit-. Нужно установить текст в качестве маски контейнера и сделать его прозрачным.

К примеру, у нас есть текст ‘The Fancy Title’, применим к нему линейный градиент:

Свойство display: inline-block не обязательно, но иначе контейнер будет занимать всю ширину, и тогда мы не увидим всего спектра градиента. Получится что то вроде:

По большому счету и -webkit-text-fill-color: transparent; нам не нужен, так как можно использовать и color: transparent;

Данные -webkit- атрибуты хорошо поддерживаются браузерами. Если не брать в расчет IE, который более не поддерживается Microsoft (в пользу Edge), то работает это на всех основных платформах.

Написать комментарий

Мало букафф? Читайте есчо !

Подчеркиваем текст или бек-граунд для текста

Апрель 4, 2023 г.

VS Задача: eсть текст, хочется не просто подчеркнуть (text-decoration: underline), а сделать это красиво. Вместо зеленой полоски, смотрящейся ...

Читать

100% высоты для дочернего flex контейнера

Сентябрь 10, 2024 г.

Flex опирается на другие принципы нежели блочные контейнеры, и иной раз не понятно какими свойствами управляется дочерний контейнер во flex родителе. Рассмотрим пример, когда у нас есть flex контейнер с двумя дочерними элементами. [crayon-681965ae7edd2933360060/] ...

Читать

 

Комментарии к «Использование CSS градиента цвета для текста»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: