применить линейный градиент CSS к тегу P, чтобы по-разному стилизовать каждую строку - PullRequest
Новая
       10

применить линейный градиент CSS к тегу P, чтобы по-разному стилизовать каждую строку

0 голосов
/ 29 ноября 2018

если вы читаете длинные статьи или публикуете сообщения в интернете, вы иногда теряетесь, когда двигаете глазами от конца строки, глядя на следующую строку.это случается со мной, поэтому я закрашиваю начало и конец линий, где конец строки и начало следующей строки имеют цвет.ведение визуального трека.Вот пример того, что я имею в виду: ссылка (просмотр ссылки на широком экране, не будет полезен при просмотре с мобильного устройства) в CSS я хочу применить линейный градиент к тегу p, где

  1. каждая строка имеет три цвета (один слева, прозрачный в середине и другой цвет справа)
  2. повторение трехцветных шаблонов для каждых трех строк

что ядо сих пор считалось, что выполнимо - зебра-подобные полоски только одного цвета image

что я хочу иметь image

любая идея о том, каксделай это?Я ценю вашу помощь, ребята.

1 Ответ

0 голосов
/ 29 ноября 2018

Можно рассмотреть repeating-linear-gradient и несколько фонов.Вы повторяете градиент слева и другой справа, и используете третий, чтобы создать разделение в середине и имитировать прозрачную часть: 

p {
  line-height:1.2em;
  background:
    linear-gradient(to right,transparent,#fff 30%,#fff 70%, transparent 100%),
    
    repeating-linear-gradient(to bottom,
      red   0    ,red   1.2em,
      blue  1.2em,blue  2.4em,
      green 2.4em,green 3.6em) 
    left/50% 100% no-repeat,
    
    repeating-linear-gradient(to bottom,
      orange 0    ,orange  1.2em,
      pink   1.2em,pink    2.4em,
      purple 2.4em,purple  3.6em) 
    right/50% 100% no-repeat;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

Как вы заметили, line-height здесь важен, поэтому мы можем рассмотреть переменную CSS, чтобы сделать ее более гибкой: 

p {
  line-height:var(--l,1.2em);
  background:
    linear-gradient(to right,transparent,#fff 30%,#fff 70%, transparent 100%),
    
    repeating-linear-gradient(to bottom,
      red   0                     ,red   calc(1*var(--l,1.2em)),
      blue  calc(1*var(--l,1.2em)),blue  calc(2*var(--l,1.2em)),
      green calc(2*var(--l,1.2em)),green calc(3*var(--l,1.2em))) 
    left/50% 100% no-repeat,
    
    repeating-linear-gradient(to bottom,
      orange 0                     ,orange calc(1*var(--l,1.2em)),
      pink   calc(1*var(--l,1.2em)),pink   calc(2*var(--l,1.2em)),
      purple calc(2*var(--l,1.2em)),purple calc(3*var(--l,1.2em))) 
    right/50% 100% no-repeat;
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>

<p style="--l:2em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis, mi eget euismod faucibus, ligula sem suscipit tortor, ut rutrum dui augue et urna. Maecenas quis diam lectus. Mauris tempus enim finibus dolor pulvinar commodo. Aenean auctor tortor sit amet venenatis ultricies. Pellentesque condimentum quam sapien, non sagittis nulla molestie eu. Morbi nec orci convallis, tempor elit sed, scelerisque arcu. Quisque vel luctus erat.
</p>
...