ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」
2008年02月05日-
スポンサード リンク
Pure Css Data Chart | Css Globe
Data visualization is mostly achieved with flash applications or with help of some programming languages. Are those solutions the only way to present, let's say simple data chart? How about giving it a try with nothing but good ol' css?
ピュアCSSでクールなグラフサンプル「Pure Css Data Chart」。
次のようなグラフを描画するCSSとHTMLマークアップのサンプルが紹介されています。
マークアップも次のように綺麗に記述できます。
<dt>Day 1</dt>
<dd class="first"><span class="p36"><em>36</em></span></dd>
<dt>Day 2</dt>
<dd><span class="type2 p45"><em>45</em></span></dd>
<dt>Day 3</dt>
<dd><span class="type3 p51"><em>51</em></span></dd>
<dt>Day 4</dt>
<dd><span class="type4 p48"><em>48</em></span></dd>
<dt>Day 5</dt>
<dd><span class="type1 p55"><em>55</em></span></dd>
<dt>Day 6</dt>
<dd><span class="type2 p80"><em>80</em></span></dd>
<dt>Day 7</dt>
<dd><span class="type3 p72"><em>72</em></span></dd>
<dt>Day 8</dt>
<dd><span class="type4 p71"><em>71</em></span></dd>
<dt>Day 9</dt>
<dd><span class="type1 p64"><em>64</em></span></dd>
<dt>Day 10</dt>
<dd><span class="type2 p55"><em>55</em></span></dd>
<dt>Day 11</dt>
<dd><span class="type3 p62"><em>62</em></span></dd>
<dt>Day 12</dt>
<dd><span class="type4 p44"><em>44</em></span></dd>
凝った作りで、CSSの学習用としてもよい資料になりそう。
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- テキストを省略してブロックを小さくできる「Cuttr.js」
- インタラクティブに動く立体的なテキストを生成「ztext.js」
- WebGLを使った動画の切り替えアニメーション実装
- スクロールにあわせて動くイメージタイル実装
- 1000以上の汎用アイコンセット「emblemicons」
- 過去のエントリ