LearningjQuery.com has a pretty cool presentation of the dates of their blog posts. Check it:
The typeface and the year being vertical should tip you off right away that images are being used to accomplish this. But also note that the date information is presented as text, as it should be, in the markup:
A quick peak in Firebug reveals the beautiful simplicity!
Sprites at Their Best
Hopefully it’s fairly obvious that each date doesn’t have it’s own unique graphic. The dates are pieced together from a single graphic (css sprites!), where different smaller parts of the graphic are shown in the three different regions: day, month, and year. Perhaps you’ll recognize this from a similar technique Joost de Valk posted about nearly a year ago.
Take a look at this beauty:
The HTML:
The end result HTML is going to be like this:
Jun
30
2009
We have a wrapper, and three regions. This gives us what we need to match these schematics:
In a CMS like WordPress, the backend code to produce that would be like this: