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
http://csssprites.com/

sprite & accordion  merged demo:
http://css-tricks.com/examples/SpriteAccordion/#

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.

SmartSprites
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:

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,

… 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/

CSS Backgrounds and Borders Module
Kosta’s contribution

Table of contents

* 1. Introduction
* 2. Values
* 3. Background properties
o 3.1. Layering multiple background images
o 3.2. The ‘background-color’ property
o 3.3. The ‘background-image’ property
o 3.4. The ‘background-repeat’ property
o 3.5. The ‘background-attachment’ property
o 3.6. The ‘background-position’ property
o 3.7. The ‘background-clip’ property
o 3.8. The ‘background-origin’ property
o 3.9. The ‘background-size’ property
o 3.10. The ‘background’ shorthand property
o 3.11. The backgrounds of special elements
* 4. Border properties
o 4.1. The ‘border-color’ properties
o 4.2. The ‘border-style’ properties
o 4.3. The ‘border-width’ properties
o 4.4. The ‘border-radius’ properties
+ 4.4.1. Corner Shaping
+ 4.4.2. Corner Clipping
+ 4.4.3. Color and Style Transitions
+ 4.4.4. Overlapping Curves
+ 4.4.5. Effect on Tables
o 4.5. The border shorthand properties
* 5. Border Images
o 5.1. The ‘border-image-source’ property
o 5.2. The ‘border-image-slice’ property
o 5.3. The ‘border-image-width’ property
o 5.4. The ‘border-image-outset’ property
o 5.5. The ‘border-image-repeat’ property
o 5.6. Border-image drawing process
o 5.7. The ‘border-image’ shorthand
* 6. Miscellaneous Effects
o 6.1. The ‘box-decoration-break’ property
o 6.2. The ‘box-shadow’ property
* 7. Definitions
o 7.1. Glossary
o 7.2. Conformance
o 7.3. Levels
+ 7.3.1. CSS Level 1
+ 7.3.2. CSS Level 2
+ 7.3.3. CSS Level 3
o 7.4. CR exit criteria
via CSS Backgrounds and Borders Module Level 3.

Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

text-shadow: 2px 2px 2px #000;

This produces the following text with a shadow 2px right and below of the text, which blurs for 2px:

Users of Webkit (from Safari 3+), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror or iCab should see a grey drop-shadow behind this paragraph.

For anyone not using those browsers, here is a reference image (from Opera 9.5):

Note: This feature is NOT new in CSS3; it was originally proposed in CSS2. Safari had it from version 1, however!

The following works in Opera, Konqueror, iCab and Firefox 3.1a, and looks really cool (or, rather, the opposite!):

via Text-shadow, Photoshop like effects using CSS – CSS3 . Info.

50 New Useful CSS Techniques, Tutorials and Tools

via 50 New Useful CSS Techniques, Tutorials and Tools – Smashing Magazine.

OnmouseOver Show DIV.

DIV Popup for the OnmouseOver Event