2008年3月31日 08:20
プログレスバーは、タスクの進行状況がわかって、とっても便利ですよね。
この、プログレスバーは、CSSとGIFアニメーションだけでとっても簡単に作れてしまいます。
用意する画像は、以下の３種類です。
1. 枠の画像
2. バーのGIFアニメーション
3. バーを隠す画像（分かりやすくするために、横幅を広げて表示してます。）
3のバーを隠す画像をCSSで調節すると、簡単なプログレスバーの出来上がりです〜。
詳細はこちらからどうぞ。htmlファイルもダウンロードできるので、是非お試しください。
『Pure CSS Animated Progress Bar』
Popularity: 25% [?]
2008年2月18日 07:56
MTで作られた綺麗なサイトを集めたショーケースサイト
MTを使われている方には、いろいろと参考になるのではないでしょうか？
とっても綺麗なブログがたくさん集められていますよ～。
詳細はこちらからどうぞ～。
『Movable Love』
Popularity: 10% [?]
2008年2月6日 07:39
CSSの::selectionという要素を使う、ちょっとしたCSSトリックです。
↑のようにテキストを選択してハイライトさせると、背景の画像が現れます。SafariとFirefoxでお試しください・・・
こちらから、サンプルCSSをどうぞ～。
『Image Appears When Text Is Highlighted』
Popularity: 4% [?]
2008年1月7日 08:59
個人的に、毎回楽しみにしているTUTORIAL BLOGさんの記事。
今回は、『25 Code Snippets for Web Designers (Part8)』
という人気のシリーズが公開されておりました。
っというわけで、ご紹介されていたものの中から、特に気になったものをピックアップしてご紹介。
1. swfIR
このコードを使えば、イメージに影を付けたり、角を丸くしたり、角度をつけたり、ボーダーを付けたりして、ファイルをswfに変換して、きれいに表示してくれます。
XMLのデータから、とってもきれいなグラフを作ってくれます。
3. Moo Flow
アップルのiTunesみたいな、エフェクトが簡単に作れます。
jqueryを使って、サブのタグクラウドをマウスオーバーで表示できます。
他にもまだまだ、たくさんあります。続きはこちらからどうぞ～。
『25 Code Snippets for Web Designers (Part8)』
Popularity: 5% [?]
2007年11月1日 10:30
TutorialBlogさんの記事でまとめられていた、JavaScriptとCSSで作られたフォトギャラリー12個。
写真をいっぱいブログに貼り付けたい方には便利ですね。
どれも、いい感じのエフェクトがかかっていて楽しいですね。
まとめられていた中から、わたくしが気に入った4つをご紹介。
1. (E)2 Photo Gallery Made With Mootools
2. Imago – An Ajax Image Gallery
3. jqGalViewIII
続きはこちらからどうぞ～。
『12 Javascript Image Galleries | Tutorial Blog』
Popularity: 22% [?]
2007年10月17日 12:16
ブログなどのデザインで必ず必要になるメニューのデザイン。
CSSで作られたメニューデザインのサンプルをまとめて71種類！
これだけあれば、お気に入りのメニューが見つかりそうですね。。
詳細はこちらからどうぞ～。
『71 CSS menus for free』
Popularity: 3% [?]