Sonntag, 2. Januar 2011

CssSpriter - A CSS Sprite Generator

CssSpriter is a small utility (with a nice graphical user interface) to create css sprite sheets from multiple icons (like icons, buttons, ...).

The output which will be generated, is a Html file (with css included), a css sprite sheet (.png) and a coordinates information sheet (.jpg).



Download here

Download here

Current Version: 1.2
  • HTML view.
  • Class names will be generated from the filenames of the images.

Kommentare:

  1. Awesome tool. Thanks a lot. It would've been nice, if the css class names generated by the tool are the actual images like "logo_png" instead "style-0".

    Anyway, thanks a lot for making development simple.

    AntwortenLöschen
  2. Hey Gopinath

    In the newest Release (1.2) this feature has been added. I forgot to update the post, sorry. :-) Thanks for the comment!

    AntwortenLöschen
  3. Hey, really great tool!
    My only problem is that I have images which name contains a '.' character, and your tool converts it to '-'. I need the '.' to be kept since my images names defines a state of the icon (e.g. myImage.state-hover, myImage.state-active, myImage.state-default) which I want to be generated in the css in the same way.

    AntwortenLöschen
  4. CSS Scripter was really an interesting part of programming for the developers.I always like to work with this scripter which makes the graphical presentation awesome.
    web design company

    AntwortenLöschen
  5. Thanks,

    It would be better if the columns were sortable. So one could make a sprite with larger images in the upper.
    And maybe this is difficult but is it possible to add an option to sprite the images in a mixed way, not only vertical and horizontal.

    AntwortenLöschen
  6. Thanks! That was the only tool, that didn't instantly die when I dragged 900 images in.

    AntwortenLöschen
  7. A good online Sprite generator that doesn't require windows or program is http://cssspritegenerator.net
    It can do the same things + retina and webp
    It's as easy as drag and drop

    AntwortenLöschen

Socialize!