前の記事 ≪:コンテンツエリアにスクロールバーが付いたタブUI実装jQueryプラグイン...
次の記事 ≫:2010年10月13日 管理人のブックマーク

イカしたデザインのプログレスバーをCSS3で作成する例

2010年10月13日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
How to create a kick-ass CSS3 progress bar - CatsWhoCode.com

イカしたデザインのプログレスバーをCSS3で作成する例
次のようなデザインのプログレスバーをCSS3とJSを使って実装する例です。



バーの背景がアニメーションする上に進捗によって滑らかにアニメーションしてくれます。
そのまま応用して使うことも出来ますし、解説を見て勉強することも出来ます。



CSS3なブラウザで動きを見てみましょう。
実装ページ

関連エントリ
関連の記事検索:CSS3, Web制作, Webデザイン, JavaScript
スポンサード リンク

By.KJ : 2010年10月13日 11:06 livedoor Readerで購読 Twitterに投稿

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