Grow your CSS skills. Land your dream job.

Date Display Technique with Sprites

Published by Chris Coyier

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:

<div class="postdate">
        <div class="month m-06">Jun</div>
        <div class="day d-30">30</div> 
        <div class="year y-2009">2009</div> 
</div>

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:

<div class="postdate">
        <div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
        <div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div> 
        <div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div> 
</div>

The CSS

The CSS is where the sprite action really happens. With those special class names that we have set up in the HTML, we can set which portions of the image to use.

First, we set relative positioning on the parent. Then we absolutely position each of the three regions within. We set all three of them to use the same background image (our sprite), set their respective widths and heights, and kick the text off the page.

Then, we set each of the months (12 possibilities), days (31 possibilities), and years (goes 10 years out) with the specific background positioning needed to show the specific region we need.

.postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.month, .day, .year { 
  position: absolute; 
  text-indent: -1000em;
  background-image: url(/wp-content/themes/ljq/images/dates.png);
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...

.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...

.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...

Enjoy!

Comments

  1. Permalink to comment#

    Waw. Thank you for sharing the trick.

    I should do this.. once, minimal…

  2. Great, now I understood the sprite thing… :-D

  3. yeap! this is awesome.

  4. Niels
    Permalink to comment#

    WOW really great trick!

    love it

  5. Permalink to comment#

    I Digg it.

  6. Sven
    Permalink to comment#

    just saw the heading in my rss reader and thought, nah he isn’t gonna talk about the date thing on learningjquery.com…

    :)

    • Benjamin
      Permalink to comment#

      heh. Yup. I immediately assumed this post would be about learningjquery.com as well.

  7. Sweet — clever trick.

  8. Nice trick as always Chris. Good job!

  9. Juan
    Permalink to comment#

    This sprites technique is really nice, I use it a lot, however I have issues when using transparent png sprites for IE6, you’ve shown the Unit PNG Fix, however i seem to get some issues when applying it to sprites. Any ideas on what I might have been doing wrong?

    • Nikki
      Permalink to comment#

      The alphaimageloader filter doesn’t support css background-position, so you can’t use it with sprites.

    • The DD_belatedPNG js fix has decent background-position for PNG. You can get it here: http://is.gd/1Rcrt Hope it helps!

    • Damn that IE6. Yeah, it’s a bummer, IE6 doesn’t handle transparent pings good at all. A solution would be, if it’s a static element like the date example, to use a conditional CSS file and use a solid png image. If it’s a change of position on hover, then in the conditional CSS set it to not change, it’ll still be functional just less visual feedback.

    • D
      Permalink to comment#

      Fireworks can save a PNG that plays friendly with IE6. Alpha for browsers that have a clue, solid transparency for tired/busted IE6. Read more at http://www.sitepoint.com/blogs/2007/09/18/png8-the-clear-winner/

    • Juan
      Permalink to comment#

      Hey Thanks!, the DD_belated works just fine :), and I wasn’t aware of the Fireworks option, although I use it all the time!!, thanks.

    • 8-bit PNGs work fine in IE, I believe.

  10. Permalink to comment#

    It’s a different and cool look.

    Regards
    Rata

  11. Permalink to comment#

    Very creative use of sprites! Nice of you to go in-depth to show us how it’s done, Chris.

    A bit off-topic: Too bad the colour contrasts are so low that it’ll be hard to see on some screens (I’m on a laptop now, and had to bend the screen even more to really read it).

  12. Impressive, im increasingly in love with sprites :D

  13. Raleigh Buckner
    Permalink to comment#

    This looks like an interesting technique. The only possible drawback I see is all of the extra CSS needed for the display. That’s a lot CSS to download just to have a fancy date display.

    • You are right. But since each graphic item is in a predictable place, you could use jq to produce the css. i.e. each date might be, say, 50px down from the next, so dayycoord=day*50 sort of thing.

      You’d have to add code to deal with dates over 16 (or live with a longer graphic with just two columns: column 1 = months followed by years. Column 2 = days.

    • You could also use something like LESS to automatically generate the different background positions.

  14. very much helping tips of CSS.

  15. Nikki
    Permalink to comment#

    That’s very clever :)

  16. GraphicGorilla
    Permalink to comment#

    My mind has blown right open. Never thought of using it this way. It won’t be long before we’ll see just as clever variations on this !

    Great post !

  17. Very creative, though it involved lot more typing in the style sheet (am I lazy or am I not?) ;)
    Thanks for the tutorial.

  18. Permalink to comment#

    That is an awesome use of sprites!

    Why would one use divs to house the individual segments of the date? Would not a span with a display:block work better? That way, when styles are removed or screen reader are used, it would appear like this:

    Jun 30 2009

    …instead of the peculiar:

    Jun
    30
    2009

    Throw in a comma (,) for “Jun 30, 2009″ with a class that will be display:none.

    • You’re absolutely right. Spans would be a better choice. Should have done that first time around. Will update the html as soon as I get a chance.

  19. Very original technique! Now I need to find a suitable case to take advantage of this. Thanks! I like sprites =)

  20. Permalink to comment#

    Woooow thanks for the tip, and easy way to do it!!

  21. Thanks for breaking it down for us, Chris. This is a good reminder that I should be dissecting cool visual elements more often, especially when they are created by geniuses like Karl Swedberg. :)

  22. wow ! really cool one chris …

  23. That’s a sweet little trick they use. Good explanation of the implementation, homefry.

  24. I ♥ Sprites!

  25. Very smart use of sprites.

  26. Adam
    Permalink to comment#

    Wouldn’t it be smarter to determine the position of the image by the class?

    for example, div.d-20 would be (height of day div * 20)

    Would need either js or css generated on the server, but that’s got to be better than typing around 50 declarations.

  27. Very cool. can’t wait to put one together.

  28. Now, I have got to give that a go on the HiddenCSS re-think.

  29. Or in about 3 lines of css you could just use this http://snook.ca/archives/html_and_css/css-text-rotation

  30. I was in LearningKquery.com site just before enter in CSS-Tricks. Weird!
    Very cool, Chris! Require some work, but the final result is awesome!

  31. Permalink to comment#

    I did a very similar thing about a year ago, mimicking the iCal icon:

    http://lucassmith.name/pub/calendar/stamp.html

    While it’s a nifty idea and definitely looks cool, practically speaking, the sprite and css make for a much larger data payload to the page to display at most a handful of dates.

    In this particular example, there’s also no need to include the month or day in the sprite except to ensure the font.

  32. This is awesome and very very clever. Thanks!

  33. Permalink to comment#

    isn’t this effect achievable without images in html5/css3? I’d be interested to see how its done in that situation, although the sprites are pretty cool

  34. Well, the sprite thing is something we had to learn. But personally I’m not comfortable using a large stylesheet to define a big list of sprite coordinates for such a little thing. I’m much more interested in some more efficient ways to do so like the one I found at is.gd/1RgZU
    It’s pretty much a hack that will break CSS2.1 validation (who cares), but stay tuned to CSS3.

    • There are a couple comments to the tune of how much “extra CSS” this is. I just want to be clear that the above technique, and css sprites in general, are actually incredibly efficient.

      If each one of these dates/months/years was a separate graphic, it would require even more css and slow things down substantially with all the additional http requests.

    • Yeah, but you still could’ve saved yourself a fair amount of rules by using actual text for the parts of the date that don’t need to be rotated. That way, for the most part, the text size can still be increased for those who need it to.

    • Permalink to comment#

      I wasn’t thinking so much of text resizing (accessibility), but rather efficiency, when agreeing with John that “Month” and “Day” could/should remain text.

      Only the “Year” is rotated & requires an image.

      Additionally, why not make the “Year” a sprite image of rotated numbers (zero through nine) and piece it together in a similar fashion so that ANY year may be represented, instead of a hardwired “range” of years?

      NOW you have my attention!

    • I dont see how much more you would save taking out the days and month, it would only be really minor as its going to be a tiny png anyway. Plus keeping them all images will keep the font display uniform. As we all knows, fonts display differently on different computers.

    • I implemented this in a slightly different way which avoids all the extra rules in your style sheet:

      http://tinyurl.com/ks7qkg

  35. Daniel K
    Permalink to comment#

    i like the i information, how about cutting down on a little divitis though and making the month/day/year into paragraphs, or even setting it up with a paragraph and 3 spans. Yes you would have to do a display:block, the information still comes across.

    • It’s a tiny part of all code.

    • Even better, making each entry a .hentry, and marking the date up with microformats.

    • Permalink to comment#

      Paragraph tags wouldn’t be appropriate for the bits. Spans, yes, but that’s already been covered. Paragraph for the wrapper’s a fine addition.

      So far as using semantically rich content goes, though, the wrapper could well be a header, any one you like. Datelines are pretty much subheaders, and that’s how I mark them up, generally.

  36. Iain
    Permalink to comment#

    Interesting use of sprites, good food for thought!

  37. A bit of divitis in the markup, but nice solid sprite example/article.

  38. Smart use of css sprites, I like it.

  39. very nice technique, i save this picture of date sprites some months ago and also want to learn this technique, but unfortunately i forgot where i download and where saved. thanks alot for sharing.

  40. Thanks for sharing. Might be useful for blog designs when a date is required. Can’t see myself rotating the date clients on more corporate websites, but what a great use of CSS Sprites!

  41. Adrian
    Permalink to comment#

    Okay, this might be efficient, but it would be more efficient to use php or something like that to only output the css that applies to the current date/time.

  42. I think CSS sprites are cool, but wont they have issues later on while maintaining a site if you wanted to add a lot more images..also u can’t use background repeat or place a background image on the top left or top right part of an element unless its at the corner of the sprite…

  43. I was just on that site looking up some info to spiff up an accordion, and then I saw this! I was admiring those numbers — thanks for the explanation and examples! Always great.

  44. Hi Chris,

    I’ve become a fan of yours. I really love css-tricks.com

    CSS sprites are a new technique i’ve learnt from css-tricks.com and it’s awesome.

  45. Thanks a lot, everyone, for the great comments! I’ve updated the html to be more “semantic” so it now looks like this (for example):
    <abbr class="postdate published" title="2009-06-30T11:32:22-05:00">
    <span class="month m-06">Jun</span>
    <span class="day d-30">30</span>
    <span class="year y-2009">2009</span>
    </abbr>

    Hope that makes it through the WordPress parser.

    • Permalink to comment#

      It’s great to see a site owner changing it so fast! Admirable :)

    • Permalink to comment#

      ABBR’s an interesting choice. Title attribute timestamp’s a wonderful addition.

    • Sean Foushee
      Permalink to comment#

      Excellent rewrite, and use of the abbreviation tag combined with exchanging the nested divs with spans!

    • Sean Foushee
      Permalink to comment#

      One other quick addition, the .postdate style needs to be updated to include display:block as the abbreviation tag is an inline element.

  46. MissMoment
    Permalink to comment#

    pure css beauty/trick

  47. I have been wondering how to do this for a while. and its a wonderful technique, my only question though is how do you get it to recognize what month, day and year it is, and then choose the correct image accordingly?

  48. Ross
    Permalink to comment#

    This sorta raises the question–at least in my feverish mind–about being able to program or script CSS.

    Is that possible? How conditional or parameter driven can CSS be?

  49. Liban
    Permalink to comment#

    looks easy but yet….

  50. nice man thanks for sharing this
    i will defo be try it out.

  51. Damien
    Permalink to comment#

    I would actually have used spans instead of divs, so the text would render on one line (when CSS is turned off). And also render the content to a more readable format.

    June
    30th
    2009

    @Micheal Short Look at the HTML. The system that generates the dates writes unique classes for each day, month and year. For example: the class ‘m-06′ stands for month 06: June.

  52. After reading this I decided to play around with a clock using an image sprite and the same idea for positioning the background to display the correct details – it’s not perfect but uses a similar idea with a sprite.

    Forgive me if the JS is a bit clunky, it’s not my strong point.

    http://www.fludotlove.co.uk/examples/clock/index.html

  53. I love CSS sprites, and in situations like these where it obviously makes sense for it to be in one image like “calender.png” or “date.png.”

    Some new folks might think it’s a hard technique, but it’s not at all. I actually just look in Photoshop’s measuring tool at first to get as close as possible to the coordinates, then use my Developer Toolbar to edit the css on the fly, and get the correct position. This way if it’s a couple pixels off, I don’t have to refresh a billion times which you might think you’d have to do.

    I’m also against generators, but there are some for sprites which work really well. My main reason that I don’t like them though is you can position them where you want to.

    Chris, can you make the comment inputs save your details though? I used to be able to just click them before to get the dropdown, or it’d already be all filled in.

  54. You can achieve the very same effect without using sprites and images at all, just with raw text and css:

    http://snook.ca/archives/html_and_css/css-text-rotation

  55. Chris is always great, nice job again dude, been waiting for this one for a long time, thanks.

  56. Chris, this is a good article, I was also thinking on write about this in my website but you do it first.

    In my site (www.mariuzzo.com) I use the same technique, please take a look.

  57. This is a great tip…. I Digg it.

  58. This is really great technique. Sprites to the rescue!

  59. Wou, nice article about sprites! Really helps to understand this technique thru clear example.

    Would be nice to see more different and practical stuff made with sprites, because I think this technique will be very popular and “what everyone should do” in near future.

  60. Hey this trick work in blogger?

  61. i am sooo impressed, its a nice work (i never think of doing such a thing, but i will do that for my Business site very soon)

    Apprecaiate you and give more and more tips

  62. Permalink to comment#

    It’s an awesome final result with great performance. It’s nice to see you share this kind of quality techniques for free, keep up :)

  63. Permalink to comment#

    Great use of sprites, thanks for sharing this it is fantastic.

  64. Permalink to comment#

    Thanks for sharing this. Very effective use of sprites.

  65. Ads
    Permalink to comment#

    It’s cool. But I tried in IE 7. The vertical year 2009 has more margin than in FF. And It came out of box, if I set it in a box together with date.

  66. Very clever, totally one of those, ‘I wish I thought of that tricks!’

  67. Permalink to comment#

    Really nice post. Thanks.

  68. Permalink to comment#

    Hi,

    Is there a way possible to use Sprites in for background image. means REPEAT it. I google it but can’t find anyway which can help me to use Sprites in Background image.

    Regards

  69. lenny
    Permalink to comment#

    thanks
    i was hopping for a tut like this for a long time

  70. It’s cool. But I tried in IE 7. The vertical year 2009 has more margin than in FF. And It came out of box, if I set it in a box together with date.

    • Permalink to comment#

      Maybe you can edit following:
      .year { bottom: 0; right: 0; width: 17px; height: 48px;

      .y-2006 { background-position: -150px 0px;}

      to

      .year { bottom: 0; right: 0; width: 17px; height: 44px;

      .y-2006 { background-position: -150px -5px;}

  71. That’s what we called awesomeness. One of the best date box, without having any image actually.

  72. Permalink to comment#

    Awesome idea – love it!

    For lazy people like me you can just build the css on the fly with something like the following…

    <?php
       $mt = (get_the_time('m') - 1) * -28;
       $dt = (get_the_time('d') - 1) * -31;
       $yt = (get_the_time('y') - 1) * -50;
    ?>
    
    
    <div class="postdate">
       <div class="month" style="background-position: 0 <?php echo $mt; ?>px;"><?php the_time('M') ?></div>
       <div class="day" style="background-position: -50 <?php echo $dt; ?>px;"><?php the_time('d') ?></div>
       <div class="year" style="background-position: -150 <?php echo $yt; ?>px;"><?php the_time('Y') ?></div>
    </div>

    You’d have to pull all the day numbers into a single column unless you want to get funky with the rules…and maybe giggle the -heights a bit.

    Thanks again for sharing!

  73. Truk
    Permalink to comment#

    Looks nice, but more than 50 lines of extra code for just one effect is kinda hardcore…

  74. Permalink to comment#

    Thanks for taking the time to showcase the “shorthand” method there… my CSS know-how is a bit limited, but things like this are making me better and better.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".