Archive for February, 2010

My PHP-CLI CSS Sprite Generator allows you to combine any number of images in a given directory into a select few composite CSS Sprite images. Also generates a stylesheet.

Source code documentation snippet explains details:

/**
 * CSS Sprite Generator
 *
 * Combine any number of images in a given directory into a select few composite
 * CSS Sprite images. (e.g. one for horizontally-repeating, one for vertically-
 * repeating, and one for images that do not repeat like buttons.)
 *
 * Also generates an accompanying CSS stylesheet you can copy/paste from and use
 * as a guide in obtaining the x-y coordinates as well as the width/height
 * dimensions of your sliced images as they are located in the corresponding
 * composite image.
 */

CSS Sprite Generator
Usage: css-sprite.php [OPTION]... [PATH]

 --path <path> Path where sliced images reside. Default is current working
 directory where the program is launched.
 --prefix <prefix> Optional prefix used in output filenames for composite
 images. Default is "sprites".
 --matte <rgb> RGB color matte. Default is "255,255,255" which is white.
 For PNG 24-bit transparency, use "transparent".

Naming files:

 The suffix of your sliced image filenames determines how they are composited:

 -x = horizontally repeating (repeat-x)
 -y = vertically repeating (repeat-y)
 -n = not repeating (no-repeat)

 Filename examples:

 border1-bottomleftcorner-n.png
 border1-bottommiddle-x.png
 border1-middleright-y.png

 Note that images which repeat on BOTH the X and Y axis, such as tiled
 backgrounds, must be contained within their own image and cannot be used in
 CSS sprites for obvious reasons.

 You can also modify the files as they are composited:

 -pr<pixels> = add padding to the right of the image
 -pl<pixels> = add padding to the left of the image

 Filename examples:

 border1-middleleft-y-pr300.png
 border1-middleright-y-pl300.png

Check it out:

mikesmullin’s CSS-Sprite-Generator at master – GitHub.

Will add more documentation soon.