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

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

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

 

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

Строки имеют отступы, и это достаточно сложно осуществить.

box-decoration-break вероятно, нам в этом поможет.

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

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

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

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

Автор: Chris Coyier

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

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

Метки:

Похожие статьи:

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