工具,使CSS的精灵?

有没有什么好的工具来制作CSS精灵?

理想情况下,我想给它一个图像的目录和一个现有的.css文件引用这些图像,并创build一个大的图像优化所有的小图像,并改变我的.css文件引用这些图像。

至less我想它需要一个图像的目录,并生成一个大的精灵和.css需要使用每个作为背景。

有没有好的Photoshop插件或完全吹嘘的应用程序来做到这一点?

21 Solutions collect form web for “工具,使CSS的精灵?”

这将为你做90%的工作: http : //spritegen.website-performance.org/ 。 您仍然需要自己编辑规则,但该工具会为您提供新CSS文件所需的代码片段。

即时精灵是我正在处理的浏览器中的CSS精灵生成器。 这真的很快,但没有其他一些function那么多。 它目前只适用于Firefox或Chrome,因为它使用JavaScript FileReader和HTML Canvas在Web浏览器内生成精灵而不需要上传。

Steve Souders现在有Sprite Me。 试试看,它似乎工作得很好。

这里是链接http://spriteme.org/这里是博客文章宣布它。

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

这看起来很有希望

http://csssprites.org/

另外我发现这篇文章里面有一些有用的信息,甚至有些读者的评论值得一读。

也显然谷歌networking工具包有一些东西 – 所以如果你使用,这可能是值得一试。

ZeroSprites是一个CSS sprites生成器,旨在使用VLSI floorplaningalgorithm进行面积最小化。

发现这一个相当快速的 500K上传限制可能是一个痛苦。 源代码在这里可用

Tonttu是基于Adobe AIR的应用程序,它为创build强大的CSS Sprites图像提供了简单的界面。 您可以指定FiledWidth和FieldHeight或sorting图像。
用Tonttu桌面工具创buildCSS Sprites图像

还不清楚,如果它将成为核心的ASP.NET框架,但这里是一个微软的csssprites的codeplex项目:

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

如果你喜欢它 – 使用它 – 或者就像这个想法然后添加评论。 我认为这将是一个伟大的事情,在ASP.NET框架。 没有亲自使用它(我必须自己发明轮子),但是它得到了很好的评价。


它包括以下组件:

  • 用于自动生成精灵和内联图像的API
  • 控件和帮助程序提供了调用API的方便方法

第二版中增加的function:

  • Web窗体的CSS链接控件(为用户的浏览器select适当的CSS文件,但不显示图像)
  • 使用除App_Sprites之外的自定义文件夹path
  • 更改精灵图像的平铺方向
  • 将生成的CSS与用户自己的CSS合并

未来版本考虑的function:

  • 自动select最有效的精灵背景颜色
  • 自动缩小呈现的CSS
  • 用.NET 3.5编译

只要使用http://sprites.scherpontwikkeling.nl/它也可以从网站URL生成精灵…你可以在开发你的网站后整合你的精灵。 这是非常容易使用;)

不是一个直接的答案,而是我的开发人员和networking集成商,考虑简单地调整每个精灵的权力两个; 例如16像素或32像素网格。 这使得在CSS文件中计算偏移更容易。 gifd和png格式压缩得非常好,所有的空白都不重要。

指南针CSS框架自动生成雪碧 。

如果你喜欢Java,那么你可以使用GWT 1.5+,它带有一些名为“ ImageBundle ”的东西。 GWT编译器将为您处理所有令人讨厌的细节。 你甚至不需要编写一行JavaScript代码或写任何CSS。

这是一个脚本, 通过Photoshop脚本将图像合并到CSS sprites中 。 它不会像你问的那样做一个精灵图,但是如果它们是相同的大小,它将把图像合并成两个(2,4,8)的倍数。 我喜欢结合相似的图像(正常,hover,select,select的父母)比在一个文件中的所有图像。

如果你在轨道上使用ruby,有一个容易安装库来生成CSS精灵。

http://github.com/aberant/spittle

那里有一个叫ActiveSprites的新工具,它是active_assets gem的一部分。

Github: http : //bitly.com/eRTwU4

你使用一个rubydsl来定义你的精灵,然后做“rake精灵”,精灵和相应的样式表会被生成。

这是rad!

这是一些示例代码,

# 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 

https://github.com/northpoint/SpeedySprite

这个工具采取了一种新颖的方法,即以HTTP服务的forms组装您的请求图像。 这使整个过程非常简单(无需预处理,随时更改图像):启动该服务,然后在HTML中引用任何想要的图像:

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

因为它是dynamic的,你甚至可以从一组dynamic的图像,如缩略图页面制作精灵。 虽然不支持JPEG,但PNG和GIF工作正常。

我build议你使用Sprite Master Web 。 我自动生成精灵画面并为您导出CSS代码。 它总是试图用高级algorithm生成最小的精灵表。

这是一个截图和youtubevideo

在这里输入图像说明

所有这些工具都不符合我的要求,所以我写了一个使用Mark Tylers的小图像库mtpixel(现在是mtcelledit的一部分)。它不是超级广泛的,但它可以通过mtpixel构build的函数轻松扩展,包括:灰度,颜色反转,旋转,锐化,量化,后置,翻转(垂直和水平),变换,RGB – >索引,索引 – > RGB,边缘检测,浮雕,绘制多边形,文本和更多。

所有你要做的就是将一组图像传递给args(支持png,gif和jpeg),并且将输出一个叫做sprite.png的rgb png以及有用的图像切片数据到stdout。 我在bash脚本中使用它来精炼图像的整个目录,并输出切片数据以自动生成css(希望最终能够用一些创造性的sed / awk自动replace现有的img标签)

小狗Linux的二进制包将在这里:

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

我的用例只需要垂直拼接图像到一个新的PNG,所以这是所有的,但我的源代码是公共领域和mtcelledit库是gpl3。 与mtpixel静态链接,二进制是<100kb(dynamic链接时只有几kb)和唯一的其他依赖libpng,libjpeg和libgif(和官方mtpixel freetype,但我不需要文本的支持,所以我注释掉静态构build中的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; } 

如果您使用.net,请查看http://www.RequestReduce.com 。 它不仅自动创build了精灵文件,而且通过一个HttpModule通过合并和缩小所有的CSS来完成。 它还使用量化和无损压缩优化精灵图像,并使用ETags和Expires头来处理生成的文件的服务,以确保最佳的浏览器caching。 这个设置很简单,只需要一个简单的web.config更改。 请参阅我的博客文章,了解Microsoft Visual Studio和MSDN示例库的采用情况。

我最近find这个工具:SpriteRight http://spriterightapp.com/

SpriteRight是Mac的CSS spritesheet生成器,可让您导入现有的图像或样式表。 使您的网站加载速度更快,降低带宽成本并节省时间。 SpriteRight甚至可以即时生成CSS代码。