CODEWITHSUNDEEP
htmlcss
dalold
dalold

Reputation: 145

Alternate text colour for each line of paragraph

I am trying to change the text colour on alternate lines of a paragraph. The problem is, the number of lines in a paragraph will depend on things like screen size. Is there a way in CSS where I can have alternate text colours for each line inside a <p> tag?

For example, in the following code

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>

Each line of text should be an alternate colour regardless of which words are actually on which lines (which will obviously depend on the screen size).

My first instinct was to try and calculate the number of lines based on screen size, but then I'm not sure where to go from there.

Upvotes: 4

Views: 1149

Answers (1)

Zak
Zak

Reputation: 2058

Nice question! For a CSS only implementation of this, you can use the magic of webkit-background-clip, along with a gradient.

You can try out my solution at https://jsfiddle.net/kavot054/, I've also put the HTML and CSS code for it below.

Notice the relationship between the line-height of the text and the gradient; if you were to change the font for example, you would need to update both of these.

It is also worth noting that the webkit-background-clip only works on webkit browsers, so this is something to be wary of when thinking about your site's accessibility.

p {
  line-height: 30px;
  background: -webkit-repeating-linear-gradient(red, red 30px, blue 30px, blue 60px);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas.
  Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>

Upvotes: 7

Related Questions