jquery.snipe スナイパーになれるjQueryプラグイン「jquery.snipe」。 白黒の画像をレンズを合わせると拡大させつつカラーになるというようなUIを作れるjQueryプラグインです。 レンズ部分のデザインもいい感じです。 いざ実装するとなると難しそうなこのUIも次のようなマークアップを書いた後に $(elem).lens() で初期化するだけです 関連エントリ 画像のカーソル位置を拡大できるjQueryプラグイン「mlens」 拡大可能なGoogleAnalytics風のグラフを描画するJSライブラリ「envision」

CSS3の角丸、ボックス・テキストシャドウ、不透明度、変形など、リアルタイムに結果を確認しながらスタイルシートを生成してくれる使って楽しいオンラインジェネレーターを紹介します。 Useless CSS3 Generator Useless CSS3 Generatorは、作者曰く「CSS3のスニペットを必要としない人には全く無用のジェネレーター」ですが、実用性もあり、しかも使ってて楽しい（特にスクロール時のギミックが！）素晴らしいジェネレーターです。 各ジェネレーターのデザインもシンプルでかっこいい！

Meteocons 個人・商用サイトで無料利用可。 フォーマットはPSD, CSH, EPS, SVG、そしてフォント（TTF, OTF）。

Font Custom アイコンフォントをコマンドラインで生成できる「Font Custom」 ベクター形式のアイコンをフォントファイルに1個にまとめてフォントのように扱えるけど実はアイコン、なアイコンフォントをコマンドラインでジェネレートできるツールです。 SVGファイルをまとめておいてコマンドラインを叩くとCSSとフォントファイルが生成されます。 単にフォントファイルにまとめるだけでなく、CSSを利用して次のようにテキストの横にアイコンを表示することができます。 フォントなので、テキストの色変更やサイズ変更に対応でき、CSSのフィルタにも対応可能です。 フォントアイコンでサイト作成を効率化したい方は覚えておくとよさそうですね。 関連エントリ フリーのアイコンフォント１０まとめ メジャーなアプリケーションのアイコンフォント「Pictonic」 オシャレなアイコンが詰まったアイコンフォント

2012年下半期、チェックしておきたいUIデザインをdribbbleから紹介します。 PSDやPNGファイルをダウンロードできるので、勉強にもなりますよ。 下の方は、さまざまなエレメントが揃ったUI Kitです。

Flashのような美しいアニメーションで、複数のテキストをスライドやフェードなどで表示するjQueryのプラグインを紹介します。 デモページ ※キャプチャは、スライドとフェードのミックス。 animateText.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="/animateText.js/js/animateText.js"> </script> ※linear以外のアニメーションも使用する時は「jquery-ui.js」も外部ファイルに加え

App Folders plugin for jQuery | iOS-like folders to display complex information. iOSのアイコンフォルダ風のUIを作れるjQueryプラグイン「App Folders」。 クリックすると開くあのクールなフォルダをブラウザで再現したUIを実装プラグインです。 iPhoneサイトでは既にユーザが使い方について理解していると思うので、使い方によっては使い勝手のよいサイト作りに活用できそう 関連エントリ スマホ用サイトに使えそうなドロップダウン実装jQueryプラグイン「DropKick」 モバイルブラウザでの高速クリックを実現するjQueryプラグイン「jQuery Fastbutton」 スマホサイトでも使えそうなかっこいいドロップダウンメニュー実装jQueryプラグイン「ddSlick」 スマホの入力が超楽にな

Photobooth.js HTML5でWebcamの内容にエフェクトを付けて撮影できる「Photobooth.js」 MacのPhotoBoothのようにリアルタイムエフェクトがかけられ、その場で撮影が可能というものです。 カスタマイズできるのは色彩・色合・彩度。更に指定範囲のみの撮影などにも対応 試しに撮影してみました。これは新しいですね。 単にWebcamで撮影するものは数あれど、こういうのは初めて見た気がします 関連エントリ WebCamで撮影をHTML5で実現するデモ CanvasとWebcamで作られたブラウザ上で動作する面白デモｘ２ 自分でスタイリングして好きなアイコンを選んでセットでDLできる「Iconbench」

個人でも商用でも、そしてクライアントのプロジェクトでも無料で利用できる、スマートフォン・タブレット向けのサイトが簡単に作成できるjQuery Mobileを使ったテンプレートを紹介します。 Cooky -Free Mobile Site Template Cookyの特徴とラインセス Cookyのデモ(ページ） Cookyのデモ（エフェクト・テンプレート） Cookyの特徴とライセンス Cookyはスマートフォン・タブレット向けのサイトが簡単につくれるよう、ページやエレメントが一式揃ったテンプレートです。 その名の通り、特に飲食をベースにしたビジネスやブログなどを想定してデザインされています。 ValidなHTML5+CSS3で実装された11ページ。 グリッド、アコーディオン、リスト、ボタンなども用意。 レスポンシブ対応のスライダー。 コンタクトフォーム。 jQuery Mobile, G

タブ、ドロップダウン、アコーディオン、カルーセルなど、今まではスクリプトに依存しないと実装できなかったものをスタイルシートベースで実装するBootstrapのプラグインを紹介します。 Bootstapのプラグインですが、CSSの「:checked」を使ったテクニックを学ぶのにも役立ちます。 Bootleg.css 仕組みは簡単に説明すると、見えない状態のラジオボタンを使い、そのオン・オフのチェック状態でコンテンツを表示・非表示します。 デモと共に、「:checked」擬似要素の使い方を紹介します。 モーダル ボタンをラジオボタンにし、そのチェック状態でモーダルを表示・非表示します。 HTML <-- Button to trigger modal --> <label for="modal1" role="button" class="btn">Launch demo modal</lab

動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン 2012年12月10日- Make an HTML5 video a background - body bg demo 動画を背景にするとこんなにカッコいい、というデモと実装jQueryプラグイン。 Youtubeの動画を背景にするjQueryプラグインがあったりしますが、今回は自前の動画を背景に使ったサイトが簡単に作れます。 動画フォーマットも各種指定することで色々な端末に対応することができそう 実装コード。各種動画ファイルをフォーマットベースにオプション指定 若干重いですが、将来的にはこういったサイトも当たり前のように登場していることでしょう。 関連エントリ フリーのオープンソースなHTML5動画プレイヤーいろいろ