前の記事 ≪:WordPressでのページ表示高速化の色々まとめ
次の記事 ≫:シンプルなポートフォリオサイト構築用WordPressテーマ25

CSS3で動くプログレスバー作成サンプル

2011年02月28日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
CSS3 Progress Bars | CSS-Tricks

CSS3で動くプログレスバー作成サンプルが公開されています。
JavaScriptに頼ることなく実現できています。jqueryに思いっきり頼ってました。大変失礼!


デモページはこちら

一本のバーの実現に必要なコードは次のようにシンプル。
<div class="meter"> 
<span style="width: 25%"></span> 
</div>
デザインが可愛いのでこうしたテイストのサイトにそのまま使えます。
CSS3が動くスマートフォンでも使えそうですね。

これはとてもナイスです。

関連エントリ
関連の記事検索:CSS3, プログレスバー, CSS, デザイン
スポンサード リンク

By.KJ : 2011年02月28日 10:02 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)