[CSS]日付の年の箇所だけを90度回転させて配置するスタイルシート
Post on:2009年7月31日
sponsors
ブログなどで見かける日付のデザインで、年の箇所を90度回転させて配置するスタイルシートを紹介します。
紹介する回転方法は二種類、左がテキストデータを回転して配置するもの、右が予め背景画像に回転させて配置するものです。
まずは、左のテキストを回転して配置する方から。
上段はサイトのサンプル画像、下段はWin XPでのキャプチャです。
HTMLは下記のようになっています。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <div class="example-date"> <span class="day">31</span> <span class="month">July</span> <span class="year">2009</span> </div> </textarea> |
回転にはSafari 3, Fx 3.5などの新しいブラウザに「rotate」を使用し、IEに「filter」を使用します。
Safari, Fx向け
|
1 2 3 4 |
<textarea name="code" class="css" cols="60" rows="5"> -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); </textarea> |
IE向け
|
1 2 3 |
<textarea name="code" class="css" cols="60" rows="5"> filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); </textarea> |
ブラウザによる差異を無くしたい場合は、背景画像がおすすめです。
※テキストのは下記にインスパイアされたとのことです。
Date Display Technique with Sprites
年、月、日は全て一枚の背景画像に配置されており、CSSスプライトを使用しています。
背景画像（※上部のみクリップ）
HTMLは下記のようになっています。
HTML
|
1 2 3 4 5 6 7 |
<textarea name="code" class="html" cols="60" rows="5"> <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> </textarea> |
sponsors
