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

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

デモのキャプチャ

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

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

デモのキャプチャ

Text Rotation with CSS

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

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

HTML

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

Safari, Fx向け

IE向け

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

デモのキャプチャ

Date Display Technique with Sprites

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

背景画像のキャプチャ

背景画像(※上部のみクリップ)

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

HTML

sponsors

top of page

©2018 coliss