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

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

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

 

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

Автор: Chris Coyier

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

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

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

Комментарии Facebook:

Добавить комментарий