DesignWalkerのタネ » css

CSSとGIFアニメーションだけで作れるプログレスバー

admin — Tue, 01 Apr 2008 05:20:45 +0000

プログレスバーは、タスクの進行状況がわかって、とっても便利ですよね。

Pure CSS Animated Progress Bar

この、プログレスバーは、CSSとGIFアニメーションだけでとっても簡単に作れてしまいます。

用意する画像は、以下の３種類です。

1. 枠の画像

2. バーのGIFアニメーション

3. バーを隠す画像（分かりやすくするために、横幅を広げて表示してます。）

3のバーを隠す画像をCSSで調節すると、簡単なプログレスバーの出来上がりです〜。

詳細はこちらからどうぞ。htmlファイルもダウンロードできるので、是非お試しください。
『Pure CSS Animated Progress Bar』

MTで作られた綺麗なサイトを集めたショーケース『Movable Love』

admin — Tue, 19 Feb 2008 04:56:12 +0000

MTで作られた綺麗なサイトを集めたショーケースサイト

Movable Love

MTを使われている方には、いろいろと参考になるのではないでしょうか？

とっても綺麗なブログがたくさん集められていますよ～。

詳細はこちらからどうぞ～。
『Movable Love』

テキストを選択すると背景画像が現れるCSSトリック

admin — Thu, 07 Feb 2008 04:39:03 +0000

CSSの::selectionという要素を使う、ちょっとしたCSSトリックです。

↑のようにテキストを選択してハイライトさせると、背景の画像が現れます。SafariとFirefoxでお試しください・・・

こちらから、サンプルCSSをどうぞ～。
『Image Appears When Text Is Highlighted』

ウェブデザイナーのためのCode Snippets 第8弾

admin — Tue, 08 Jan 2008 05:59:11 +0000

個人的に、毎回楽しみにしているTUTORIAL BLOGさんの記事。

今回は、『25 Code Snippets for Web Designers (Part8)』

という人気のシリーズが公開されておりました。

っというわけで、ご紹介されていたものの中から、特に気になったものをピックアップしてご紹介。

1. swfIR

このコードを使えば、イメージに影を付けたり、角を丸くしたり、角度をつけたり、ボーダーを付けたりして、ファイルをswfに変換して、きれいに表示してくれます。

2. XML/SWF Charts

XMLのデータから、とってもきれいなグラフを作ってくれます。

3. Moo Flow

アップルのiTunesみたいな、エフェクトが簡単に作れます。

4. jquery Hover Sub Tag Cloud

jqueryを使って、サブのタグクラウドをマウスオーバーで表示できます。

他にもまだまだ、たくさんあります。続きはこちらからどうぞ～。
『25 Code Snippets for Web Designers (Part8)』

JavaScriptとCSSで作られたフォトギャラリーまとめ

admin — Fri, 02 Nov 2007 05:30:59 +0000

TutorialBlogさんの記事でまとめられていた、JavaScriptとCSSで作られたフォトギャラリー12個。

写真をいっぱいブログに貼り付けたい方には便利ですね。

どれも、いい感じのエフェクトがかかっていて楽しいですね。

まとめられていた中から、わたくしが気に入った4つをご紹介。

1. (E)2 Photo Gallery Made With Mootools

2. Imago – An Ajax Image Gallery

3. jqGalViewIII

4. JonDesign’s SmoothGallery

続きはこちらからどうぞ～。
『12 Javascript Image Galleries | Tutorial Blog』

71種類のCSSメニュー

admin — Wed, 17 Oct 2007 07:16:50 +0000

ブログなどのデザインで必ず必要になるメニューのデザイン。

CSSで作られたメニューデザインのサンプルをまとめて71種類！

これだけあれば、お気に入りのメニューが見つかりそうですね。。

詳細はこちらからどうぞ～。
『71 CSS menus for free』