Comments on: CSS Sprites Workflow

By: Ricardo

Ricardo — Thu, 26 Aug 2010 17:34:32 +0000

We keep a Fireworks PNG with all the separate elements and gridlines in an img/source folder, in source control. One vertical sprite for icons and other elements that will be displayed horizontally, with safe spacing, and a horizontal one if needed for flexible height elements. That way anyone can modify the sprites safely, and you can get exact positioning info from the FW file.

By: Federico

Federico — Wed, 18 Aug 2010 13:49:26 +0000

I use spriteme quite often, the only problem is that it totally forget about background-position changes on pseudo classes like hover and active…
how do you handle this?

By: Tom

Tom — Mon, 16 Aug 2010 11:26:29 +0000

be carefull with the linked css compressor. it deletes css3 gradients!

By: thinsoldier

thinsoldier — Mon, 16 Aug 2010 00:07:17 +0000

PRESSURE YOUR FAVORITE BROWSER DEV TO IMPLEMENT -MOZ-IMAGE-RECT!!!!!!!!!!!!!!!!!

By: Daniel15

Daniel15 — Sun, 15 Aug 2010 08:08:54 +0000

For generation of sprites, I use SmartSprites (http://csssprites.org/). It generates a sprite image based on comments in the CSS saying which images to change to sprites, and outputs a new stylesheet (with the sprites used). A lot nicer than SpriteMe or similar, IMO. :)

By: d8niel

d8niel — Sat, 14 Aug 2010 16:53:59 +0000

i always make my own *sprite.psd, as most projects i work on go through many changes/revisions before they ever reach production.
also, this way when the client asks for *all* of my slices (which i am historically terrible keeping up with) i can just hand off the source file, and everyone is happy and full of glee.
also, i have always heard that horizontal sprites load faster, so i generally lay them out with distinct images placed side by side while related images (button states, custom form input bgs, et cetera) are placed vertically.
i also tend to make specific sprites for repeat-x and repeat-y images.
not sure if this is the best, it’s just how i roll, yo.

By: Amit

Amit — Sat, 14 Aug 2010 08:58:13 +0000

Consider the diagonal sprite maker that is available in the related article posted above. It largely reduces the height of the sprite by placing the images diagonally.

By: traq

traq — Sat, 14 Aug 2010 04:00:34 +0000

mmm… gotcha.

I was not thinking of necessarily placing the image in a corner, though (now that you mention it) that is probably the most common place sprites are used.

okay, all is now well in my world. : )

thanks

By: Chris Coyier

Chris Coyier — Sat, 14 Aug 2010 00:24:26 +0000

I kinda think it does solve that though. If the sprite location is in the upper left of a box for example, that box can be infinitely wide and infinitely tall (to the right and down) without showing another part of an image in that sprite. Of course that depends on the location in the box and the diagonal that you choose. If you wanted to put the sprite in the top right corner, you’d need to reverse the angle of the sprite layout.

By: Chris Coyier

Chris Coyier — Fri, 13 Aug 2010 19:24:03 +0000

I think it adds about 10px of space between each sprite which is good practice anyway. It does it vertically, so if you have a zillion of them you could probably do better arranging your own grid. However, “speed” is a big part of workflow, so using an automated tool that takes about 30 seconds to use or handcrafting things which may take hours definitely needs to be taken into account.