CODEWITHSUNDEEP
css
chacham15
chacham15

Reputation: 14251

Tool for css sprites?

I have seen the other similar questions, but I am looking for a tool with a specific feature: I want it to be able to resize and center the given images in the created sprite. What I mean is: I have a button that is 48x48 and I have a bunch of images of varying size all of which are potential backgrounds for the button. Is there a tool that will center these images to give me the required 48x48? Ideally, it would scale down larger images but leave smaller images the same. Lastly, it should be able to create big and small versions of the icons and the corresponding css.

Upvotes: 2

Views: 746

Answers (4)

Sean
Sean

Reputation: 346

It sounds like you may want to use a couple of tools meet the requirements you've mentioned:

Scaling and managing images: I like to use IcoFx for creating multiple versions of images/icons of different scale and bit depth. It seems to scale things pretty well can do so with a particular platform in mind to meet it's requirements (ie. Windows icon images, Mac icon images, etc)

http://icofx.ro/

Sprite Creation: I prefer to use a desktop sprite creation tool over web-based tools as I don't know where I'm uploading my images to when I use the web based tools. If you're working on a project with proprietary images I think it just makes sense to be extra careful. I've been using one from CodePlex simply called "Sprite Generator" (it's Windows based). It's worked really well for me, it'll take your images and arrange them in an optimal fashion and give you the css needed to reference them. It also allows you to make some adjustments, such as adding buffer between images to avoid artifacts from appearing when in a zoomed browser.

http://spritegenerator.codeplex.com/

Upvotes: 1

Sonal Khunt
Sonal Khunt

Reputation: 1894

you can try this CSS Sprites

Upvotes: 0

Stephen
Stephen

Reputation: 1737

As you've not specified any environment or tool restrictions, I'll offer this one.

There is some tooling for Visual Studion (Sprite and Image Optimization Preview 4) that does the compilation of a bunch of images into a sprite sheet, and provides .net helpers to then use the images in your code.

So instead of placing in the CSS to get the image from the sprite sheet, you can use a nice helper that points to a reference of the image (eg. @Sprite.Image("~/App_Sprites/logo.png"))

Scott H has a good blog post on this (here), and was how I first found out about it.

Upvotes: 0

Gregg B
Gregg B

Reputation: 13727

There is nothing better than http://www.spritecow.com/

Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css.

Upvotes: 2

Related Questions