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

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

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

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

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

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

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

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

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

Выравнивание блока HTML (вертикально и горизонтально)

Сентябрь 17, 2015 г.

Центровка элемента - одна из типовых задач в верстке. Решать её можно по разному, рассмотрим некоторые способы. Горизонтальная центровка. С центровкой ...

Читать

Разрыв строки во flex

Март 6, 2024 г.

В общем случае, это может быть и "разрыв столбца", зависит от выбранного направления заполнения flex контейнера (задаётся свойством flex-direction). Суть проблемы в том, что иногда требуется прекратить заполнение вдоль выбранного направления и начать ...

Читать

 

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

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



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