CSS Gradient Text demo

It’s been a really long time since I’ve seen someone do a CSS technique and said “wow, that’s actually really cool”. I was hanging out at David Shea’s Mezzoblue today, and in the sidebar was a link to an article called “CSS Gradient Text”. I thought to myself, “great, another stupid CSS trick that ruins markup and CSS”. So I click it, read through, and my eyebrow raised (not really, I can’t do that). So I looked at the CSS and XHTML; it’s actually not that bad.

The technique uses a < span > inside and < h1 > to put a transparent PNG gradient. Now, as a semantic markup person I VERY rarely use a < span > because it really doesn’t mean anything so I might substitute it with something else, wrap the text and rework some of the CSS. But I like this a lot, I’m all for things that piss off graphic designers and show off how powerful CSS can be (like my css shevles & css arrows).

It’s very cool, check it out: CSS Gradient Text demo

here’s the full article