От автора: сегодня поговорим о том, как реализуется многострочный линейный градиент CSS.
Моей первой мыслью было:
Строки имеют отступы, и это достаточно сложно осуществить.
box-decoration-break вероятно, нам в этом поможет.
Но оказывается, что нам нужна небольшая хитрость, чтобы это заработало. Если со сплошным цветом все хорошо, то некоторые отступы, объединяемые в с box-decoration-break, должны иметь базовый фреймворк:
Но градиент там будет странным в нескольких строках:
Я хочу сказать спасибо Матиасу Отту, создавшему этот форк, который мне кажется идеальным решением:
Хитрость заключается в том, чтобы настроить плавный фон строк так, как вам нужно, с чистым белым текстом и черным фоном. Затем по всей области с градиентом устанавливается псевдо-элемент для черной области. Добавьте, mix-blend-mode: lighten;, чтобы градиент появился только в черной области. Отлично.
Автор: Chris Coyier
Источник: https://css-tricks.com/
Редакция: Команда webformyself.