Date text rotation with CSS

I've recently changed the submitted date on my blog posts and added a little CSS magic, thanks to Jonathan Snook's article on Text Rotation with CSS

Essentially it's a few lines of code, I didn't show the full CSS, there is a fair bit more to it than below. Feel free to Inspect Elements on my node teasers to see the inner workings.

It works with all browsers except Opera but I've been able to make it look ok with the use of body-tags which are generated from the $_SERVER['HTTP_USER_AGENT'] variable. I will post on that trick soon.

XHTML:

<div class="example-date">
  <span class="day">31</span>
  <span class="month">July</span>
  <span class="year">2009</span>
</div>

CSS:

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

EDIT: Since posting this I've changed to a different method using image sprites and CSS background positioning. A lot more involved method but works on ALL browsers.

I will post some Drupal specific details on this soon. Meanwhile you can view the basic technique at http://css-tricks.com/date-display-with-sprites/

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.

More information about formatting options