[CSS]グラフィカルで美しい3Dの棒グラフを実装するスタイルシート

Post on:2010年5月26日

sponsors

画像を使用しないで、3Dの棒グラフをスタイルシートで実装するチュートリアルをmarco folioから紹介します。

上記のキャプチャはデモの一部で、全景は下記のようにかなりリッチなものになっています。
ポスターにもできそうと思いました。

デモ全景

上記はiPodの箇所にマウスをホバーしたもので、各箇所にホバーするとそれぞれがハイライトされます。

この3Dの棒グラフのアイデアは、下記サイトに刺激されたからだそうです。

この透明感のある美しい3Dの棒グラフには画像が一切使われておらず、CSS3で実装されています。
※iPodなどのアイコンは画像です。