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

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

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

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

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

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

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

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

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

Прогресс бары, анимация загрузки...

Январь 11, 2019 г.

Сайт, где вы найдете конструкторы анимации прогресс баров - loading.io. Я бы сказал налетай, подешевело, но всё абсолютно даром. Основная особенность ...

Читать

Цвет HR - как изменить в CSS

Апрель 27, 2017 г.

Горизонтальная линия HR - независимый HTML элемент - вызывает много вопросов у начинающих. Основная проблема - установка цвета. Установка стилей ...

Читать

 

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

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



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