CSS Sprite

Sprite Creator. This program allows you to upload an image and select areas of the image to create the css for that sprite.

at:http://www.floweringmind.com/sprite-creator/   –  For the CSS positioning

CSS  sprite



sprite & accordion  merged demo:


Projekt Fondue CSS Sprite Generator
This generator lets you ignore duplicate images, resize source images, define horizontal and vertical offset, define background and transparency color, assign CSS class prefixes and various other things. It also supports many languages. The source code is available for downloading and is covered by a BSD license. Want to run a local copy? Well, you can do that, too.


A Java-based desktop application that parses special directives that you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

You can work with your CSS and original images as usual and have SmartSprites automatically transform them to the sprite-powered version when necessary. A PHP version is available as well. Open-source. Check also Chris Brainard’s Sprite Creator 1.0.

Bonus: How Does The background-position Property Work?

The background-position property, together with CSS specificity and CSS floats, is probably one of the most confusing and counter-intuitive of CSS properties.

According to CSS specifications, the background-position takes two (optional) arguments: horizontal position and vertical position. For example:

1 .introduction {
2     background-image: url(bg.gif);
3     background-position: [horizontal position] [vertical position];
4     }

Using this property, you can define the exact position of the background image for the block-level element (list item li). You can use either % or px units (or mix both) to define the starting position (i.e. the upper-left corner) of the displayed part of the master image. Alternatively, you could use the following keywords: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

Hence, in background-position: x% y%, the first value is the horizontal position, and the second value is the vertical position. The top-left corner is 0% 0%. The bottom-right corner is 100% 100%. If you specify only one value, the other value will be 50%.

For instance, if you use,

1 ul li {
2     background-image: url(bg.gif);
3     background-position: 19px 85px;
4     },

… then the background-image will be positioned 19 pixels from the left and 85 pixels from the top of the list item element.

As SitePoint’s reference article explains: “a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image. In the above case, this causes the image to be perfectly centered. This is an important point to grasp — using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.”

You can find a detailed explanation of the property in the article “background-position (CSS property)” on SitePoint.

Other intersting css tricks : http://css-tricks.com/downloads/

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply

Your email address will not be published. Required fields are marked *