This small tutorial will try to replicate the famous and recently popular Date Display Technique with Sprites, but opting to do it with CSS 3 instead. The advantage of the CSS 3 method is that:

• You don’t have to create CSS image sprites.
• No more sprites limitation. With image sprites the year is limited, the font selection is fixed, the month name is limited to English words only, and so on. With this technique everything can be shown.
• The CSS is much shorter and understandable.

This only works with modern browsers that support CSS3, of course.

Look Ma, No Images!

The HTML structure for the date:

<div class="date">
  <span class="day">30</span>
  <span class="month">Jun</span>
  <span class="year">2009</span>
</div>

Next, the CSS for it can be like this.

.date {
  position: relative;
  width: 70px;
  font-family: Georgia, serif;
  color: #999;
  margin: 0 auto;
 }
 
.day, .month, .year {
  position: absolute;
  }
 
.day { 
  font-size: 30px;
  top: 15px;
  }
 
.month { 
  top: 0;
  left: 0;  
  font-size: 18px;
  }
 
.year { 
  top: 19px;
  right: 0;
  font-size: 20px;
  rotation: -90deg !important;
  /* ** Hacks ** */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);  
  }

And after that (here’s the hardest part so I hope you pay more attention now)…

…nah, just kidding. We’re done. Here’s an actual result:

Advanced Tweakeries

Depending on your own design, you might want to:

• tweak the width of the .date div (more width, more distance between the year and the day/month pair)
• change the font-sizes (in which case you will likely need to tweak the .date’s width and the other span’s top property).
• Use your own font either with sIFR, Cufon, or the more modern @font-face method. Custom font is probably the sprites technique’s only advantage over this CSS 3 method, but no more with this last tweak.