CSSだけで円グラフを表示するサンプル
2007年08月09日
スポンサード リンク
Have a Slice
This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
CSSだけで円グラフを表示するサンプル。
次のような円グラフをCSSのみで実現するサンプルが公開されています。
HTMLコードは以下のようにシンプルに表現できます。
<div class="shadow">
<div id="example">
<div class="pie size35"></div>
<p class="percent">37%</p>
</div>
</div>
次のような1個の円グラフを並べた横長画像のbackground-positionをずらして、必要な部分だけ表示することで実現しているようです。
サーバサイドでもクライアントサイドでも画像を動的に描画することないので軽くていいですね。
スポンサード リンク
投稿者 KJ : 2007年08月09日 12:06
|
![]()
間違いの指摘をしていただける方はメールでお願いします
最新のブログ記事
- プロフェッショナルなノートパソコンの広告風画像を作る流れ
- 歯車や雲、人型など実用的なPhotoshopブラシ集
- 2008年8月28日 管理人のブックマーク
- オープンソースの便利PHPスクリプトまとめサイト「Open Source PHP」
- 表示法が新しくセクシーなLightBox「SexyLightBox」
- 背景画像やテクスチャ画像のリソース13サイト
- 2008年8月27日 管理人のブックマーク
- Ajaxベースのクールなショッピングカート作成
- WEBで好きな曲を共有可能な音楽共有オープンソース「Opentape」
- インパクトのあるポスター画像を作るPhotoshopチュートリアル集
- 2008年8月26日 管理人のブックマーク


















