[CSS]日付の年の箇所だけを90度回転させて配置するスタイルシート

ブログなどで見かける日付のデザインで、年の箇所を90度回転させて配置するスタイルシートを紹介します。

紹介する回転方法は二種類、左がテキストデータを回転して配置するもの、右が予め背景画像に回転させて配置するものです。

まずは、左のテキストを回転して配置する方から。

上段はサイトのサンプル画像、下段はWin XPでのキャプチャです。

HTMLは下記のようになっています。

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

回転にはSafari 3, Fx 3.5などの新しいブラウザに「rotate」を使用し、IEに「filter」を使用します。

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

ブラウザによる差異を無くしたい場合は、背景画像がおすすめです。
※テキストのは下記にインスパイアされたとのことです。

年、月、日は全て一枚の背景画像に配置されており、CSSスプライトを使用しています。

背景画像（※上部のみクリップ）

HTMLは下記のようになっています。

<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>

Post on:2009年7月31日