Spritebox - Create CSS from Sprite Images

CSSスプライト実装が誰でも簡単にできるツール「Spritebox」
複数枚の画像を1枚にして、HTTPのコネクション数を下げてページ表示速度を上げてくれるCSSスプライト。
なんだかメンドクサイ、という方にもこのツールがあればWYSIWYGで画像が取れてしまうので楽ちんです。
流れとしては、画像をアップロードして、表示したい画像の領域をドラッグ＆ドロップで選択するだけで、その領域を表示するためのCSSを出してくれるというもの。

まずは画像アップロード


アップされた画像がキャンバス上に表示されるので、ドラッグ＆ドロップで領域を選択。
プレビューウィンドウがプレビューを出してくれます。



Create CSS ボタンがあるのでクリックすればその部分のCSSを吐いてくれます。




関連エントリ

• CSSスプライトを使ったナビゲーションメニュー作成サンプルとチュートリアル
• CSSスプライト作成補助ツール「CSS Sprit.es」