イメージファイルをzipにしてアップロードするとCSSスプライト用の画像とCSSを自動生成するツール・SpriteMachine

Ads

CSSスプライト用の画像とCSSを
自動で生成してくれる、という
Webツールのご紹介。作るのは
結構面倒なのでこうして自動化
してくれると楽で助かりますね。

CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。

SpriteMachine


ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。

img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; }
img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.png) 0px -72px no-repeat; }
img.spritemachine_hoge { width: 16px; height: 16px; background: url(sprite.png) -16px -72px no-repeat; }
img.spritemachine_huga { width: 16px; height: 16px; background: url(sprite.png) -32px -72px no-repeat; }
img.spritemachine_piyo { width: 16px; height: 16px; background: url(sprite.png) -48px -72px no-repeat; }

CSSは上記のように作られます。

機会があれば使ってみようかなと思います。

SpriteMachine