chrismar.sh

If, like me, you have a graphic designer who’s particularly picky about the way his designs render on screen, you may have come up against this problem: graded headers. I’ve often had a design that has included something like this:

(Okay, I know this is pretty strong, but bear with me – we want to be able to see the effect, right?)

What to do? Being good coders, we don’t want to go down the “headers as images” route, especially since this is a dynamic site and the header could say, well, anything. There’s options like Cufon fonts, which uses the canvas tag to render text, but there’s the ‘Flash of Unstyled Content’ problem, where you see the header before Cufon replaces it. There’s also the overhead of calls to the server – if your site will be seen hundreds of times a day, having three or four extra calls per page will make a difference.

Well, fear no more – I’m here to help! Our friend CSS can help – giving us graded headers that falls back to solid colour in browsers that don’t support our CSS magic.

The Effect

“What is this magic?” I hear you cry. The answer is background-clip. Webkit has a ‘text’ value for background-clip, which makes the background clip to the text. Simple really. All that’s needed is to make sure we serve up the right styles to the right browser.

1. The original header

   Make your website work harder

2. Set the background

   More CSS magic with CSS3 gradients. You’re all down on Webkit gradients, right?

   #textId {
   	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(153,0,0,.8)), color-stop(1, rgba(255,255,255,.8)));
   }

   Make your website work harder

3. Make the text color transparent

   #textId {
   	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(153,0,0,.8)), color-stop(1, rgba(255,255,255,.8)));
   	-webkit-text-fill-color:transparent;
   }

   Make your website work harder

4. Set background clip

   #textId {
   	background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(153,0,0,.8)), color-stop(1, rgba(255,255,255,.8)));
   	-webkit-text-fill-color:transparent;
   	-webkit-background-clip:text;
   }

   Make your website work harder

The Finished Article

Depending on which browser you’re using, you may have seen the resaults already, but here’s how it appears in a few major browsers

As you can see, it’s far from perfect in Firefox and Internet Explorer, which make up a large proportion of the browser market, but if you’re after a subtle effect for your site, and you know a large proportion of your visitors use Chrome and Safari, and you want to give them a little something extra, try it out!