• かちびと.net

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

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

URL :
TRB :

Ads

Posts

Contact

Services