This is as days pass by, by Stuart Langridge

And this is One-image rounded corners, written , and concerning Uncategorized

A clever new CSS demo over at 456 Berea Street: CSS Teaser Box (via Simon Willison). It gives you rounded corners on a CSS box using only one image. The flaw is that the box has to be fixed width, but it’s still a useful technique.


The reason that it’s cool, however, is that I couldn’t work out how it worked at first. After some discussions with Simon, we sussed it; it is clever! The P inside the box has a coloured background; this coloured background hides the extra bits of the background image (the bottom of the box on the h3’s background, and the top of the box on the div’s background). That’s smart, that.

Comments

John

It took me a few minutes to figure out the 1 image version also when I found it.  I'm glad I wasn't the only one that was thrown for a moment...

This website belongs to Stuart Langridge. Contact details are available. Don't eat yellow snow. Valid HTML5, at least in theory, except for the bits that aren't because I'm that futuristic that I'm ahead of the spec, oh yes. HTML5 help from Bruce Lawson, among others. Fonts from the superb FontSquirrel. End.