実用サンプル、CSS3ピンマップデモ

CSS3やHTML5、JavaScriptに関するティップスを多く取り上げているAjaxianがPure Pulsing CSS Map Markersという記事でCSS3 Map Makerという興味深いデモンストレーションサイトを紹介している。CSS3のみで構築されたマップピンを表示するデモで、使われている画像は地図のみ。それ以外のデータはすべてCSS3の機能を使ってレンダリングされている。ピンはパルスを放つアニメーションを繰り返し描画している。

今のところCSS3 Map Makerの機能をフルでサポートしているのはMac OS Xで動作するSafari 5のみ。Chromeでも動作するが、CSS 3Dトランスフォームが機能しないため、マップは平面上のまま表示され奥行きのあるイメージでは表示されない。サポートしていないブラウザで閲覧するとかなりずれて表示される。

CSS3 Map MakerではCSS3アニメーション、CSS3トランスフォーム、CSS3グラデーションの機能を組み合わせたデモだが、使われているマップピンは画像やページの特定のポイントを指すためのアイテムとして活用できる。CSS3を使うとこで実際に利用しそうな用途としてどういった装飾が可能になるかを示す点で興味深い。