127

cssスプライトを作成するための優れたツールはありますか？

理想的には、画像のディレクトリと、それらの画像を参照する既存の.cssファイルを指定して、すべての小さな画像で最適化された大きな画像を作成し、.cssファイルを変更してそれらの画像を参照するようにします。

少なくとも、画像のディレクトリを取得して、大きなスプライトと、それぞれを背景として使用するために必要な.cssを生成する必要があります。

これを行うための優れたフォトショッププラグインまたは本格的なアプリはありますか？

4

21 に答える 21

50

Instant Spriteは、私が取り組んでいるブラウザー内 CSS スプライト ジェネレーターです。非常に高速ですが、他のいくつかの機能ほど多くの機能はありません。JavaScript FileReader と HTML Canvas を使用して、アップロードせずに Web ブラウザ内でスプライトを生成するため、現時点では Firefox または Chrome でのみ機能します。

于 2010-11-15T14:56:50.627 に答える
48

これにより、作業の90％が実行されます：CSSSpriteGenerator。ルールを自分で編集する必要がありますが、ツールは新しいCSSファイルに必要なコードフラグメントを提供します。

于 2009-02-09T07:29:22.553 に答える
31

Steve Souders の Sprite Me があります。試してみるだけで、かなりうまくいくようです。

ここにリンクhttp://spriteme.org/と、これを発表するブログ投稿があります。

http://www.stevesouders.com/blog/2009/09/14/spriteme/

于 2009-10-21T10:59:35.490 に答える
13

これは有望に見えます：

http://csssprites.org/

また、私はいくつかの有用な情報を持っているこの記事を見つけました、そしていくつかの読者のコメントさえ読む価値があります。

また、どうやらグーグルウェブツールキットには何かがあるようです-それであなたがそれを使っているならそれはチェックする価値があるかもしれません。

于 2009-02-15T20:27:44.547 に答える
9

これを試して：

http://spritepad.wearekiss.com/

于 2012-08-28T16:56:29.220 に答える
7

ZeroSpritesは、VLSIフロアプランアルゴリズムを使用した面積の最小化を目的としたCSSスプライトジェネレーターです。

于 2012-05-04T03:11:59.910 に答える
6

500Kのアップロード制限は苦痛かもしれないので、これはかなり速いことがわかりました。ソースコードはこちらから入手できます

于 2009-02-09T07:28:23.180 に答える
4

http://sprites.scherpontwikkeling.nl/を使用するだけで、WebサイトのURLからスプライトを生成することもできます...Webサイトの開発後にスプライトを統合できます。使い方はとても簡単です;）

于 2012-11-15T15:17:37.410 に答える
4

コアASP.NETフレームワークに組み込まれるかどうかはまだ明確ではありませんが、csssprites用のMicrosoftコードプレックスプロジェクトは次のとおりです。

http://aspnet.codeplex.com/releases/view/50869

あなたがそれを好きなら-それを使ってください-またはちょうどアイデアが好きなら、コメントを追加してください。これは、ASP.NETフレームワークに含めると素晴らしいことだと思います。個人的には使用していませんが（自分でホイールを発明する必要がありました）、良い評価を得ています。

次のコンポーネントが含まれています。

  • スプライトとインライン画像を自動的に生成するためのAPI
  • APIを呼び出す便利な方法を提供するコントロールとヘルパー

2番目のリリースで追加された機能：

  • WebフォームのCSSリンクコントロール（ユーザーのブラウザに適切なCSSファイルを選択しますが、画像は表示されません）
  • App_Sprites以外のカスタムフォルダーパスを使用する
  • スプライト画像のタイリング方向を変更する
  • 生成されたCSSをユーザー自身のCSSとマージする

将来のリリースで検討中の機能：

  • 最も効率的なスプライトの背景色を自動的に選択する
  • レンダリングされたCSSを自動的に縮小する
  • .NET3.5に対するコンパイル
于 2011-02-23T21:33:28.160 に答える
4

Tonttu は、強力な CSS スプライト画像を作成するための簡単なインターフェイスを提供する Adob​​e AIR ベースのアプリケーションです。FiledWidth と FieldHeight を指定するか、画像を並べ替えることができます。
Tonttu デスクトップ ツールで CSS スプライト画像を作成する

于 2010-05-25T02:24:05.637 に答える
3

Compass CSS Framework には自動スプライト生成があります。

于 2011-11-13T03:20:41.890 に答える
3

直接的な答えではありませんが、私の仲間の開発者や Web インテグレーターの皆さん、単純に各スプライトを 2 の累乗に揃えることを検討してください。たとえば、16 ピクセルまたは 32 ピクセルのグリッドです。これにより、CSS ファイル内のオフセットの計算がはるかに簡単になります。gifd 形式と png 形式は非常に適切に圧縮されるため、その間のすべての空白は重要ではありません。

于 2009-02-12T23:57:53.360 に答える
2

https://github.com/northpoint/SpeedySprite

このツールは、要求された画像をその場で http サービスとして組み立てるという斬新なアプローチを採用しています。これにより、プロセス全体が非常にシンプルになります (前処理は不要で、いつでも画像を変更できます)。サービスを開始してから、HTML で必要な画像を参照します。

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

動的であるため、サムネイル ページなどの動的な画像セットからスプライトを作成することもできます。JPEG はサポートしていませんが、PNG と GIF は問題なく動作します。

于 2011-11-11T15:52:06.057 に答える
2

これは、Photoshop スクリプトを介して画像を CSS スプライトに結合するスクリプトです。あなたが尋ねたようにスプライトマップはしませんが、同じサイズの場合、画像を2の倍数（2、4、8）で結合します。すべての画像を 1 つのファイルにまとめるよりも、類似した画像 (通常、ホバー、選択済み、選択済みの親) を組み合わせることを好みます。

于 2009-07-07T19:23:37.910 に答える
2

active_assets gem の一部である ActiveSprites と呼ばれる新しいツールがあります。

Github: http://bitly.com/eRTwU4

Ruby DSL を使用してスプライトを定義し、「rake sprites」を実行すると、スプライトと対応するスタイルシートが生成されます。

ラッドです！

ここにいくつかのサンプルコードがあります、

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end
于 2011-03-03T15:03:59.013 に答える
2

Java が好きなら、「ImageBundle」と呼ばれるものに付属する GWT 1.5+ を使用できます。GWT コンパイラーは厄介な詳細をすべて処理します。JavaScript を 1 行コーディングしたり、CSS を作成したりする必要さえありません。

于 2009-02-09T14:17:27.533 に答える
2

Ruby on Rails を使用している場合は、css スプライトを生成するライブラリを簡単にインストールできます。

http://github.com/aberant/spittle

于 2009-11-30T04:02:47.343 に答える
1

これらのツールはどれも私の要件を満たしていなかったので、Mark Tylers の小さな画像ライブラリ mtpixel (現在はmtcelleditの一部) を使用するツールを作成しました。これはそれほど広範囲ではありませんが、mtpixel の組み込み関数を使用して簡単に拡張できます。グレースケール、色反転などがあります。 、回転、シャープ化、量子化、ポスタライズ、フリップ (垂直および水平)、変換、rgb->インデックス付き、インデックス付き->rgb、エッジ検出、エンボス、ポリゴンの描画、テキストなど。

一連の画像を引数 (png、gif、および jpeg をサポート) として渡すだけで、sprite.png という名前の RGB png が、有用な画像スライス データと共に stdout に出力されます。私はこれを bash スクリプトで使用して、画像のディレクトリ全体を分割し、css の自動生成用のスライス データを出力します (最終的には、既存の img タグを少しクリエイティブな sed/awk で自動的に置き換えられるようにすることを期待しています)。

パピー Linux のバイナリ パッケージは次の場所にあります。

http://murga-linux.com/puppy/viewtopic.php?t=82009

私の使用例では、画像を新しい png に垂直に接合するだけで済みました。これですべてですが、ソース コードはパブリック ドメインで、mtcelledit ライブラリは gpl3 です。mtpixel が静的にリンクされている場合、バイナリは 100kb 未満 (動的にリンクされている場合は数 kb のみ) であり、他の依存関係は libpng、libjpeg、および libgif のみです (公式の mtpixel では freetype ですが、テキスト サポートは必要なかったので、静的ビルドの freetype ビットをコメントアウトしました)

必要に応じて自由に変更してください。

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}
于 2012-11-08T02:30:49.093 に答える
1

Sprite Master Webを使用することをお勧めします。スプライト シートを自動的に生成し、CSS コードをエクスポートします。高度なアルゴリズムを使用して、常に最小のスプライト シートを生成しようとします。

スクリーンショットとYouTube動画はこちら

ここに画像の説明を入力

于 2012-01-26T21:47:05.013 に答える
0

.netを使用している場合は、http：//www.RequestReduce.comを確認してください。スプライトファイルを自動的に作成するだけでなく、すべてのCSSをマージおよび縮小するとともに、HttpModuleを介してオンザフライで作成します。また、量子化とロスレス圧縮を使用してスプライトイメージを最適化し、ETagとExpiresヘッダーを使用して生成されたファイルの提供を処理し、最適なブラウザーキャッシングを保証します。セットアップは簡単で、web.configを変更するだけです。Microsoft VisualStudioおよびMSDNサンプルギャラリーによる採用については、私のブログ投稿を参照してください。

于 2011-09-11T06:50:08.210 に答える
0

私は最近このツールを見つけました：SpriteRight http://spriterightapp.com/

SpriteRightは、既​​存の画像やスタイルシートをインポートできるMac用のCSSスプライトシートジェネレーターです。サイトの読み込みを高速化し、帯域幅のコストを削減し、時間を節約します。SpriteRightはその場でCSSコードを生成します。

于 2012-01-20T14:43:45.500 に答える