CSS3でプログレスバーを実装する際に使える「CSS3 Progress Bars」をご紹介。

そのまんまなのですが、プログレスバーがCSS3で実装されています。

これをJSで読み込み処理中に使ってあげると、プログレスバーが実装できるようになりますね。

ダウンロードは下のリンクからどうぞ。

ヨーロッパの地図をCSSとjQueryでクリッカブルマップにしてしまったすごいデモをご紹介。
Europe, CSS & jQuery clickable map by Winston Wolf

地図にマウスオーバーすると、ポップアップで地名を表示してくれるようになります。クリックすると、地名を選択可能に。

これ、すごいですね。

HTMLは単純な<li>タグで国名を一覧にしているだけなのですが、
以下のような画像を使って、うまくCSSで表現しています。

IE6以外のほとんどのブラウザで表示できるようになっています。
興味のある方は下のリンクからどうぞ。

「25 Amazing HTML5 Portfolio Web Designs For Inspiration」では、HTML5を使ったアイデアが盛りだくさんのサイトが紹介されている。

video、Canvas、ドラッグ＆ドロップなどを使用しているサイト集です。

参考になると思うので一度見てみてください。

jQueryを使った面白い画像ギャラリーを見つけたのでご紹介。

画像にマウスオーバーすると、3D風に飛び出すようになっています。

デモ

IE系だとうまく動作しないようですが、こういったエフェクトはインパクトがありますね。

一味違うエフェクトを実装したいという方、下のリンクからどうぞ

ボタンを作るCSSフレームワークが10点紹介されています。
エントリーの中から気になったのを、いくつかご紹介。

CSS3 Buttons With Simple Markup

非常にシンプルなボタン。18種類あり。

GitHub-Style CSS3 Buttons

以前に紹介しましたが、Github風のボタンを作れるCSSフレームワーク。
四角、角丸、アイコン付きでボタンが作れるようになります。

Zardi

Zardiを使うと、角が少しだけ丸い物と、もっと丸いボタンから形を選ぶ事ができます。

わずか4kbで作られているようですね。

BonBon Buttons

ちょっと変わった形のボタンを作りたい際に。

サイトには他にも様々なボタンがありました。
興味のある方は下のリンクからどうぞ。

ドロップダウンメニューの中にフォームを表示したい。
そんな方におすすめなのが「FormBox」。

Twitterのログインパネルのように、場所を取らずにフォームを作成する事が出来るようになります。

↑フォームにフォーカスを当てると吹き出しでメッセージを表示する事も。

気の利いたフォームを作る際に良さそうですね。
ダウンロードは下のリンクからどうぞ。

スライダや日付処理などのHTML5のフォーム要素を取り入れつつ
デザインされたフォームを作る方法が紹介されています。

以下のようなフォームを作る方法がまとめられています。

IE9が出てくる事でこういった実装も普通になってきそうですね。
興味のある方は下のリンクからどうぞ。

jQueryでアニメーションをする際にイージングを指定したい。
そんな時に便利なのが「jQuery.Easie.js」。
オブジェクトの動きを加速、減速させたい時になめらかに動くように調整してくれるプラグインです。

使用方法は以下のように移動先と、イージング方法を指定するだけになっています。

$("#box").animate({top:100}, "easieEaseInOut");

興味のある方は下のリンクからダウンロードしてみてください。

「Streamie」はnode.jsで作られたTwitterクライアントです。

Webベースにもかかわらほぼリアルタイムでつぶやきが取得できるのが特徴で
す。
これ、かなり面白そうですね。

RTやリプライは色が変わって表示されるため、非常に見やすくなっていると思います。

ずっと表示させておくと、
私の環境では若干重たい感じがしましたが、まだBeta版との事なのでこれからに期待ですね。

ソースコードはBSDライセンスで公開されているため、自由にサーバーに設置して使用できるようになっています。

「ZEN」はボタン一つのシンプルなオーディオプレイヤーです。

jPlayerというjQuery製のオーディオプレイヤーをカスタマイズして出来ており、HTML5とCSS3で実装されているようです。

プレイヤーは再生か停止かのシンプルなボタンになっているので、
シンプルなオーディオプレイヤーが欲しい方はいかがでしょうか。

Firefoxだとボタンが四角になって表示されるようです。