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

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

デモのキャプチャ

Wicked CSS3 3d bar chart
デモページ

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

デモのキャプチャ

デモ全景

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

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

サイトのキャプチャ

3Dの棒グラフ

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

sponsors

top of page

©2018 coliss