Tricky CSS issue. Color text per line?

HTML & CSS
1

I’d like to apply a different shade to each line of text in a series of h2 elements like in the screenshot below:

I had considered using a transparent png overlay with varying degrees of opacity. It works but its not bulletproof when the size of the text changes.

Can this be done with some fancy new css3?

2

I can’t see the attachment, but to answer your question about CSS3, no, it doesn’t exist. I’ll have to wait for the image to further engross your other question(s) :). Though from the sounds of it, it doesn’t really sound possible (or aesthetically pleasing) to have each line of text have different opacity.

3

There’s a pseudo-element (that has been around since CSS2 I think) called :first-line that would do half the job for you, but unfortunately not the rest.

You may have to just stick a <span> around each word, then use good old CSS2 to apply your different colours to each word. Probably the least messy solution, especially considering your PNG overlay idea. If it can be done just with text, it’s almost certainly preferable!

4

There is a schmancy new CSS thingie that could do similar to what you’re thinking, but it’s -webkit only last I checked.

It’s called mask. You can take a chunk of text in an element, set a background image, apply the bg image as “mask” and it appears only where the letters appear. You’d have the image be a vertical gradient.

But we live in the real world where NOT everyone uses webkit, to the apparent dismay of the hippest of web developers (not you, OP, I’m just ranting again)… so I would use two spans.

<p>For
<span>Healthy</span>
<span>Living</span></p>

The added bonus is instead of relying on limited width to keep the text stacked, you can simply set the p spans to display: block.

Then you’d
p {
top colour;
}
p span {
middle colour;
}
p span+span {
last colour;
}

The :first-line thing could work here, but in general it’s horrid because browsers like FF get all confuzled when the first characters of the first line aren’t alpha-numeric. Or just alpha, I forget.

5

That’s probably what I would have suggested. Use :after to apply an absolute overlay to the relative element and stretch it to fit. It would only work if you knew the number of lines (e.g. for 3 lines of text the image have gradient changes at 33%.3%).

Or just for fun :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h2 {
	width:80px;
	color:blue;
	position:relative
}
h2:first-line { color:red }
h2:after {
	position:absolute;
	content:"Living";
	bottom:0;
	left:0;
	color:green;
}
</style>
</head>

<body>
<h2>For Healthy Living</h2>
</body>
</html>

Or:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
h2 {
	width:80px;
	color:blue;
	position:relative;
	font-size:1.4em;
	line-height:1.4em;
	border-bottom:1px solid #000;
}
h2:first-line { color:red }
h2:after {
	position:absolute;
	content:"Living";
	bottom:0;
	left:0;
	color:green;
}

h2 + h2{
	margin-top:50px;	
}
h2 + h2:before{
	position:absolute;
	content:"For";
	top:-1.4em;
	left:0;
	color:orange;

}
</style>
</head>

<body>
<h2>For Healthy Living</h2>
<h2>More Healthy Living</h2>
</body>
</html>

(Not any use though really :))

6

Yep, that’s what I’m going with now and as long as I insert <br/> at the right points inside the text, it works amazingly well.

(Not any use though really :))

But fun to try.

I’ll be utilizing generated content more and more now that I know how handy it is. I recently discovered it could be used for created a psuedo clipping mask to isolate icons from a base sprite image. Doing it this way eliminates the need to create large gaps in your sprite image to accomodate vertical or horizontal clear zones.