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.
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!
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.
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%).
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.