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

ヨーロッパの地図を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で手軽にボタンを作る方法を探している。
そんな方におすすめなのが、「CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)」。

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

CSS3 Buttons With Simple Markup

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

GitHub-Style CSS3 Buttons

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

Zardi

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

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

BonBon Buttons

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

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

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

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

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

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

CSS3を使ってフォームを作成したい。
そんな時におすすめなのが「Top 10 CSS 3 forms tutorials」。

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

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

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

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

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

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

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

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

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

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

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