Многострочный линейный градиент CSS

От автора: сегодня поговорим о том, как реализуется многострочный линейный градиент CSS.

 

Моей первой мыслью было:

Но оказывается, что нам нужна небольшая хитрость, чтобы это заработало. Если со сплошным цветом все хорошо, то некоторые отступы, объединяемые в с box-decoration-break, должны иметь базовый фреймворк:

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

Я хочу сказать спасибо Матиасу Отту, создавшему этот форк, который мне кажется идеальным решением:

Хитрость заключается в том, чтобы настроить плавный фон строк так, как вам нужно, с чистым белым текстом и черным фоном. Затем по всей области с градиентом устанавливается псевдо-элемент для черной области. Добавьте, mix-blend-mode: lighten;, чтобы градиент появился только в черной области. Отлично.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: