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

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

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

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

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

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

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

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

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

Способы прижать HTML элемент к нижнему краю экрана

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

Много занимаюсь версткой, потому возникают разные интересные задачи. Решил не оставлять без внимания этот интересный опыт. Одна из таких задач, которая ...

Читать

Убираем подсветку поля при фокусе ввода в Chrome

Май 18, 2018 г.

В браузерах на движке chromium (Chrome, Opera) по умолчанию есть "подсветка" поля, получившего фокус ввода. Смотрим как убрать данный стиль. Давайте ...

Читать

 

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

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



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