Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание многострочного градиентного фона для текста

10 февраля 2019 | Опубликовано в css | Нет комментариев »

Мы столкнулись с интересной задачей: создать многострочный градиентный фон для текста. Создать текст с фоном уже довольно непросто, а также нам, вероятно, пригодится свойство box-decoration-break (перенос блока оформления). Как оказалось, нам понадобятся еще некоторые приемы, чтобы все сработало.

 

 


Если бы подходил сплошной цвет, то внутренние отступы и свойство переноса блока оформления создали бы основную структуру:

Но градиент на нескольких строках с таким подходом будет выглядеть немного странно:

Matthias Ott предложил то, что выглядит как идеальное решение:

Секрет в том, чтобы задать многострочный фон с чисто белым текстом и черным фоном. После этого наложить псевдоэлемент поверх всей черной области, которая должна стать градиентной. После задания свойства mix-blend-mode: lighten; (режим наложения осветление) градиент появится только на черной области. Вот и все.

Автор урока Chris Coyier

Перевод — Дежурка

Смотрите также:




Коментарии запрещены.