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

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

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

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

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

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

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

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

• Создание интересных нумерованных списков с помощью CSS
• Создание заголовков с линиями по краям
• Создание рамки с трех сторон элемента различными способами