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

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

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

diy/jquery-emojiarea GitHub 通常のtextareaを絵文字入力可能にできる「jquery-emojiarea」。 次のように、絵文字をテキストで表示するのではなくて、そのまま絵文字を埋め込めるtextareaに変えることができます ポップアップからクリックで挿入可能 :smile: とかでもいいのですが、初心者の場合はやはり見たまま編集が便利ですね。 6KBで軽量で$(element).emojiarea() と実装もお手軽なので、絵文字を入れたい場合など一度試してみてもよさそう 関連エントリ テキストの絵文字を画像アイコンに変えてにぎやかにしてくれるjQueryプラグイン

CSSrefresh - automatically refresh CSS files サーバ側でCSSを保存したら直ぐにCSSが反映されるようにできる「CSSreflesh」。 CSSでのデザインに注力したい場合、リロードが面倒ですが、１秒ごとにファイルの更新状態をチェックして更新されていたら反映してくれるというのがこのCSSreflesh。 毎秒サーバへリクエストに行くので、本番環境では当然NGですが、開発中にCSSデザインを組む際には便利に使えそうです。 ブラウザ上で即時反映されるようなツールもありますが、環境に応じてこうしたツールを使って効率化したいところですね 関連エントリ Photoshopのグラデーションツールの操作感でCSSグラデーションを作れるツール CSSスプライト実装が誰でも簡単にできるツール「Spritebox」

PHP Live Regex PHPの正規表現をリアルタイムに動作確認できる「PHP Live Regex」。 パターンをサイト上で定義して、サンプルテキストにマッチするかどうか？をリアルタイムにテストできて便利です。 preg_matchベースによるマッチングを行い、preg_match, preg_match_all, preg_replace という３つの関数での動作確認が可能です。 正規表現の学習用にも使えそうですね。 関連エントリ 新卒さん向け、速攻でプログラミングをマスターできるvimプラグイン「quickrun」

cssPanelMenu CodePen Facebookアプリ風パネルメニューのCSS実装デモ「cssPanelMenu」。 ページが左にスライドするあのメニューをCSSで実装したデモです。 JavaScriptレスでメニューが左にアニメーションしつつ現れるデモで、CSS自体もそこまで長くなくて分かりやすいです ナビゲーション部分のHTMLも次のような感じで分かりやすく記述可能。 CSSのみでやったというところがいいですね。 関連エントリ Facebookアプリみたいな最近流行りのUIでWEBアプリ実装が出来るフレームワーク「Sidetap」

Kort マウスオーバーでカードをシャッフルする感じのUIが作れる「Kort」。 次のような、カードを立体的にシャッフルするようなインタフェースが作れます。 Safari等のブラウザで見てみて下さい。CSS3とJavaScriptによって実現されているようですが、これまた新しいです。 将来的にはこうしたインタフェースは当たり前の物となっているんでしょうかね 関連エントリ CSS3ベースのオシャレな価格表作成チュートリアル CSS3でシャレオツなリストを作るチュートリアル iPhoneのON/OFFスイッチをHTML5/CSS3の形式でジェネレート PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」

vintageJS - add some awesome retro and vintage style to your images with the HTML5 canvas element gitHub - vintageJS ブラウザ上で画像をトイカメラ風に変換できるJSライブラリ「vintageJS」。 ファイルをアップするとパラメータを調整して簡単にトイカメラ風の画像が作れるサイトとライブラリです。 HTML5のCanvasを使っているのでサーバにやさしい。 あとはこれがどのブラウザでも動いてくれればと思うところですが、こうしたCanvas関連のライブラリが沢山あると将来的に便利になりそう 関連エントリ CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ 画像のプレースホルダを生成してくれるJSライブラリ「Holder.js」

Instant Sprite - Generate CSS Sprites Instantly CSSスプライトをブラウザにD&Dで速攻作れる「Instant Sprite」 D&D対応ブラウザ（Chrome等で）ローカルから複数ファイルをドラッグ＆ドロップしてみましょう。 ドロップした時点でCSSスプライトが完成してしまいます。 ２枚の画像をアップした結果。 すぐにCSSスプライトとして利用可能 要らないファイルがあったら、その場でクリックですぐ消せたりと色々便利です 関連エントリ CSSスプライト実装が誰でも簡単にできるツール「Spritebox」 CSSスプライトでカッコイイボタンを作るチュートリアル CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル jQueryで行うFlashみたいなスプライトアニメーションのチュートリアル

Fine Uploader a.k.a valums file-uploader 機能全部入りアップローダー実装jQueryプラグイン「Fine Uploader」。 プログレスバー付きでアップロード後の即時サムネイル表示、ドラッグ＆ドロップアップロード、複数ファイルアップロード対応など全部入り。 BootStrapのテーマにあわせることもできます。IE7移行も対応しています。 モダンなアップローダーを作るなら１つの選択肢になりそうです 関連エントリ 画像選択時にサムネイルが出て分かりやすい進捗付きjQueryファイルアップローダー「jQuery File Upload Demo」 HTML5を使ったファイルアップロード用プログラム集

Sly - jQuery plugin アイテムベースのスクロールを実現できるjQueryプラグイン「Sly」。 通常スクロールバーを動かすとブラウザがスクロールしますが、Slyで初期化したエレメント上でホイールを動かすとアイテムが横にスクロールする、みたいなUIが作れます。 ホイールだけではなくて、横に長いコンテンツのスクロールやページ送り、アイテムの追加等ができます。 応用して面白いインタフェースが作れそうです。 文書を入れてみた例。自動でスクロールさせたり、メインのコンテンツをハイライトしたりすることも出来るみたい 関連エントリ スクロールすると巻物風にコンテンツが回転するUIを作れる「FoldScroll」 ページ内スクロールならコレにおまかせ！なjQueryプラグイン「Page Scroller」 スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ラ

WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 2012年11月02日- Viewport resizer - responsive design testing tool WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」。 ブックマークレットをインストールして、自分のページで起動すれば、ページ上にツールバーが現れ、ツールバーのボタンをクリックで、小さいデバイスとしてサイトを開くことができてレスポンシブデザイン構築の際の動作確認に便利 単なるブックマークレットで害はないのでとりあえず入れておけば使えますね 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 最初からレスポンシブなCSSデザイン

25 Free Vector Icons Pack For Web and Graphic Designers | Icons | Graphic Design Junction WEBサイト制作に使えるベクターアイコンセットｘ２５。 綺麗なアプリケーションアイコンを中心に手書き風のアイコン等がまとまっています。 これだけあればアイコンに困らないってぐらいありますが、作りたい物の印象に合うアイコンを選ぶ際に使えそう 関連エントリ ６００以上のシンプルなベクターアイコンが入手できる「iconmonstr」 iOSのAppアイコン作成用PSDテンプレート 超気合の入ったiOSアプリケーションアイコン４０ RetinaディスプレイOKなアプリ用PSDアイコン350

折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 2012年10月31日- Timeliner.js Demo 折りたたみ可能なタイムラインのUIを実装できるjQueryプラグイン「Timeliner.js」 Facebookのタイムラインみたいな感じで、歴史系のコンテンツを載せるのに適したプラグインです ルールに従ってHTMLを記述して、$.timeliner() で初期化する感じで使えます 会社の歴史、サービスの歴史といった感じで色々と歴史系のコンテンツはあるので、そういったものを作る際に使ってみてもよいかも。 関連エントリ Facebookのタイムラインを作る際に便利なPhotoshopテンプレート facebookのタイムラインをjQueryとCSSで作るチュートリアル Facebookのデザインにも負けない超カッコいいタイムラインを

TinyPNG ? Compress PNG images while preserving transparency PNG画像をブラウザにドラッグ＆ドロップすればPNGを無劣化圧縮してくれる「TinyPNG」。 デスクトップ等においてあるPNGファイルをブラウザにドラッグ＆ドロップするだけでpngを圧縮してくれてすぐダウンロードできるサービスです。 ためしにやってみたところ、サイズが半分近くの65%になりました。 次のようにサイズは変わっても無劣化だということが分かります 半分以下のサイズで無劣化なら使わない手はありませんね。 関連エントリ PNGを無劣化で圧縮できるWindowsソフト「PNGGauntlet」 ドラッグ＆ドロップでCSSを瞬時に圧縮できるブラウザツール「excssive.com」

jQuery.textFit Examples テキストをブロックの中にフィットするように自動リサイズできる「jQuery.textFit」。 通常、ボックスの中にテキストを入れても、テキストの長さなんかがまちまちでかっこ悪くなるのはしょうがない、という所ですが、このプラグインを使えば、自動的にテキストをフィットするようにリサイズしてくれます。 ソースを見れば単なるdivにidが振ってあるだけというものですが、上記のようにリサイズしてくれます。 これだけだと何に使おうか？というところですが応用すればカッコいいレイアウトにするための便利な機能として使えうことができそうですね 関連エントリ 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」 faviconをアニメーションさせたりテキストを付与できるjQueryプラグイン「jQuery Favicon」 テキス

Simple yet amazing CSS3 border transition effects CSS3でボーダーを超かっこよくアニメーションするサンプル とりあえずデモページを見ていただくのが一番ですが、ボーダーをアニメーションさせて未だかつて無い効果をブラウザ上で表現しています。 デモページ 応用することでかなりいろんなことができそうだな、という、なんだかとってもワクワクするデモでした。 関連エントリ CSS3でシャレオツなリストを作るチュートリアル PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２ フルスクリーン背景がスライドショーになるCSS3サンプル