スマートフォンのようにコンテンツをドラッグできるjQueryプラグイン「overscroll」

ドラッグ操作でコンテンツをスクロール出来るようになります。

画像にマウスオーバーするとビフォー・アフター が比較できるjQueryプラグイン「uCompare」

使用前、使用後みたいな感じに2枚の画像を比較できるjQueryプラグインです。
ショッピングサイトなんかに使えそうですね。

デモでは東日本大震災の前後での
GoogleMapの画像を比較したりしています。
画像を見ると心苦しくなってしまうのですが、使い方次第では有用な使い方ができそうでした。

興味のある方は下のリンクからどうぞ。

Google+で使われている204個のアイコンがPSD形式でダウンロードできる「204 Google Plus interface icons」をご紹介。

Google+のデザインはオリジナルMacintosh開発チームのアンディー・ハーツフェルドが作られたようで、素晴らしいデザインに仕上がっています。
個人的にもすごくカッコいいと思います。

そのアイコンがPSDとPNG形式でダウンロードできるので、インスピレーションやデザインの参考にも使えそうですね。

カラーとグレースケールの二種類あり、サイズもそれぞれ 18 x 18pxと128 x 128pxが用意されていました。

商用利用可能なようですが、作成者へのリンクが必要なようです。
利用にはご注意ください。

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

HTMLベースのプレゼンツールは当サイトでも何度かご紹介しているのですが、アニメーションがカッコ良かったのとデザインが素敵だったのでご紹介。

deck.jsを使うとモダンなHTMLでプレゼンテーションが出来るようになります。

サイト自体がこのライブラリで実装されており、キーボードの矢印キーやマウスクリックに対応しておりサクサク動くようになっています。

触ってみると、エフェクトがいい感じに気持ちよくてちょっと次のプレゼンで使ってみたくなりました。

ドキュメントも豊富に揃っているので、カスタマイズも割と簡単にできそうです。

興味のある方は下のリンクからどうぞ。

AJAXで外部通信する際にロード中の表示をするのは一般に多いですが、
Apple製品などで良く使われているクルクルするローディングを手軽にカスタマイズできるライブラリを見つけたのでご紹介します。

「Spin.js」を使うと、ローディングアイコンの
ラインの数、太さ、長さ、回転スピードなどを簡単にカスタマイズする事が可能になります。

CSSとJSのみで実装されているので、画像が必要ない構成になっています。

使い方

オプションの引数を設定して、表示させたい位置のidを指定すだけのようです。

var opts = {
  lines: 12, // The number of lines to draw
  length: 7, // The length of each line
  width: 5, // The line thickness
  radius: 10, // The radius of the inner circle
  color: '#000', // #rbg or #rrggbb
  speed: 1, // Rounds per second
  trail: 100, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

対応ブラウザもIE6からiPhoneまで幅広く対応していました。

Chrome
Safari 4+
Firefox 3.5+
IE 6,7,8,9+
Opera 10.6+
Mobile Safari (iOS 4)

こういったライブラリは何度もお世話になるので、自分的に覚えておきたいです。
詳細&ダウンロードは下のリンクからどうぞ。

黄金比をサイトに取り入れるためのCSSグリッドシステム「Golden Grid System」をご紹介。

黄金比とは、「1:1.618033988..」からなる比率で、最もバランスが取れていると感じられる比率の事を指します。

画面の分割は、
ワイドスクリーン用に16分割、
タブレット用に8分割、
スマートフォン用に4分割しているようです。

メディアクエリを使用し、240〜2560ピクセルの画面サイズに対して、
バランスの取れたページを作れるとの事。

ただ、iPhone用のSafariに一部バグがあるのと、
IE6〜8に対してはIE用のクラスを作らないと行けないようです。

そのまま使えるフレームワークというわけではありませんが、参考にはなると思います。

作者の方はLess Frameworkを作った方のようです。興味のある方は下のリンクからどうぞ。

classを指定するだけでGoogle+風のボタンを実現できるCSS。

Google+風のデザインを実現できる24種のボタンが使えますよ。

有名なWebサービスのデザインはUIも非常に凝っているので、参考にできますね。

ライセンスはCreative Commons CC-BY。IE6でも動作するようになっているとの事。

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

商用利用可能なカラフルアイコンセットが配布されていたのでご紹介です。

ツイッターやFacebook、各種ブラウザアイコンなど
アプリケーションのアイコンが細かくデザインされています。

シンプルな矢印などもあるので、ホームページやブログで利用できそうです。

興味のある方は下のリンクからどうぞ。

米Yahoo! が埋め込み式のメディアプレイヤー Yahoo! WebPlayerを公開しました。かっこ良いのと使い勝手が良さそうだったのとで、いつか使うかもしれないメモ的エントリーです。

このライブラリを使用する事で、mp3へのリンクやYoutube、動画へのリンクがページ内でかっこ良く再生してくれます。

さらにページ内のリンクを自動で拾ってプライリストにしてくれたりもします。

↑再生してみた様子

対応ブラウザにはIE6も含まれているようですね。

使い方

使い方は簡単で、以下のスクリプトタグを</body>の直前に挿入すればOKです。

<script type="text/javascript" 
src="http://webplayer.yahooapis.com/player-beta.js"></script>

お手軽ですね:)
興味のある方は下のリンクからどうぞ〜。

CSSスプライトでMac OS X Lion 風のアイコンを使える「Lion Buttons in CSS」

Macの新OS Lionがリリースされてから暫く立ちますが、
Lion風UIをCSSスプライトで使えるようにした方がいましたのでご紹介。

以下のようなボタンが簡単に使えるようになります。

HTMLもシンプルな構造でclassを指定するだけで使えます。

Label

Mac風のデザインにしたい際に良いですね。

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