Date Display Technique using CSS Sprites

by Mike Badgley on July 29, 2009

This is a follow-up to an article published today by Chris Coyier of CSS Tricks.

If you haven’t read the article already, I encourage you to do so first before implementing my proposed tweaks in the following post.

To recap, a nifty technique, using CSS sprites, was implemented for displaying the current date of a particular blog post, as shown below:

Example of a date display technique using CSS sprites

Since there are so many different CSS combinations needed to show the required month, day and year, you can see how cluttered your style sheet could become when defining the background-position for each. Hardly show stopping, but wouldn’t it make sense to do all of this on-the-fly (server-side) instead of manually defining each instance in the style sheet?

This is actually pretty simple to setup, and requires only a little bit of math – nothing to head-scratching! :)

Setup the graphic sprite

dates First things first, we need to create the graphic that will be used for the sprite. I based mine off of the example created in Chris’s article. There is nothing to special about this graphic, however, it is important there there is consistent spacing between each item. For example, the month column is 29 pixels wide and each month is separated by 30 pixels. So, if I wanted to show the month of February, my CSS rule would look like so:

background-position: 0 –30px;

This same rule applies for the day and year columns.

The HTML and CSS

The HTML and CSS used are similar to what was done in the article motioned above. I put it here for reference only – it has no real importance as the focus of this article is on the styling that takes place in the steps that will follow.

HTML:

[source language="html"]
<div class="post">
<h1>Blog post title</h1>

<div class="date" title="July 31st, 2009">
<span class="month">Jul</span>
<span class="day">31</span>
<span class="year">2009</span>
</div>

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Integer non consectetur risus. Morbi mattis aliquam leo
id posuere. Proin a nunc diam. Vivamus tincidunt ipsum ac
turpis mollis mattis. Integer sit amet libero nulla.
</p>
</div>
[/source]

CSS:

[source language="css"]
div.post {
margin-left: 100px;
position: relative;
}

div.post div.date {
left: -100px;
position: absolute;
top: 0;
width: 80px;
}
div.date span {
background: transparent url(dates.gif) no-repeat;
display: block;
position: absolute;
text-indent: -5000px;
top: 0;
}
div.date span.month {
height: 14px;
right: 20px;
width: 29px;
}

div.date span.day {
height: 11px;
right: 20px;
top: 22px;
width: 18px;
}

div.date span.year {
height: 36px;
right: 0;
width: 11px;
}
[/source]

Dynamically positioning the background image based on the date

Since the original article was based on a WordPress blog / PHP setup, I’ll use that as my model, but really, any server-side language will work.

In short, what needs to be done for each date segment – year, month and day – is to determine their values and then multiply that value by the height of said element within the sprite.

For example, we have a blog post that has a date of July 29, 2009. Since the date for the blog post is composed of three parts – year, month and day – we can use a custom WordPress template tag called the_date that will return the integer value for each.

Lets start with the month and use it’s integer value to position the sprite into the right position:

[source language="php"]
<?php $tmpDateMonth = the_date(‘n’, ”, ”, FALSE); ?>
<span class="month" style="background-position: 0 -<?php echo ($tmpDateMonth – 1) * 30; ?>px;">Jul</span>
[/source]

Nothing to complicated here, but just so it’s clear, here’s a quick breakdown of what the above statements accomplish:

  1. Using the_date and forcing it to show only integer value of the month (1-12); assigning this value (making sure it doesn’t get echoed to the screen, which is done by default) to a variable.
  2. With the value assigned to my temporary variable that was created above, I subtract ‘1’ from it; otherwise the final result will position the graphic to one number higher than what I want. It’ll all make sense if you think about it – I’m a bit to lazy and tired at the moment to go into detail. ;)
  3. Finally, we take the value above and multiply it by the total height of the element within the graphic sprite. In the case of the month, the height of each month was 30 pixels.

The same steps are used for positioning the day and year as well – keep in mind that the height of the day and year elements are different, so that’s why I’m using those different values as the multiplier.

One last thing to make note of. The method for determining the background position of the year is slightly different. You don’t subtract a value of 1 from the current date’s value, but rather the starting year that is in your graphic sprite. For example, with my sprite the starting (or lowest) year is 2009, so I take the blog post’s date and subtract ‘2009’ from it. If the starting year in my sprite had been 2006 than my value for subtraction would have been ‘2006’. Get it? Got it? Good.

[source language="php"]
<?php $tmpDateYear = the_date(‘Y’, ”, ”, FALSE); ?>
<span class="month" style="background-position: -63px -<?php echo ($tmpDateYear – 2009) * 59; ?>px;">Jul</span>
[/source]

4 comments

[...] the original: Date Display Technique using CSS Sprites | Life @ iStudio Comments0 Leave a Reply Click here to cancel [...]

by Date Display Technique using CSS Sprites | Life @ iStudio on July 31, 2009 at 9:25 am. #

This does clean out some of the excess CSS lines (positioning for all the months, days and years). However, some would argue over the fact that your using inline CSS.

by Damien on July 30, 2009 at 3:49 am. #

Yes, I have to admit I felt a bit dirty using inline CSS… :)

by Mike on July 30, 2009 at 7:47 am. #

Very clever indeed. Good work!

by Chris Coyier on July 29, 2009 at 11:08 pm. #