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

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

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

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

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

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

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

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

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

Размещаем блок по центру, используя CSS

Март 29, 2016 г.

Для центровки блока средствами CSS  оперируют его внешними отступами. К примеру, такой CSS код будет центрировать контейнер DIV внутри родительского. [crayon-682aedc282391333475601/] Ключевым является значение auto для левого и правого отступов. ...

Читать

Анимация ожидания загрузки/обновления, используя CSS3

Октябрь 26, 2015 г.

Одна из типичных задач для улучшения пользовательского интерфейса на сайтах - это визуализация ожидания загрузки/обновления страницы. Наиболее частый случай ...

Читать

 

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

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



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