CSS sprites is a technique to combine unlimited number of images into one to improve the performance of your web page.Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique.With millions of users Google,Yahoo!,MySpace,YouTube and AOL do everything they can to improve the user experience. As all of them use CSS sprites to save numerous HTTP requests for their intricate interfaces.

What does css sprites does…

Group multiple images together (usually icons or decorative images) into one sprite
Evenly space these images, aligned into one or more lines
Set this sprite to the background image of an element (usually a list)
Position the sprite to display the appropriate image by shifting the X or Y position by a multiple of the spacing
Enjoy the increased speed and reduced HTTP requests

Create your own CSS Sprite…
Step1-Create an image (or collect it from anywhere)using photshop,fireworks,gimp etc.. depends on your choice.

#nav li a.item1 {background-image:url('../img/image1.jpg')}
#nav li a:hover.item1 {background-image:url('../img/image1_over.jpg')}
#nav li a.item2 {background-image:url('../img/image2.jpg')}
#nav li a:hover.item2 {background-image:url('../img/image2_over.jpg')}
#nav li a.item3 {background-image:url('../img/image3.jpg')}
#nav li a:hover.item3 {background-image:url('../img/image3_over.jpg')}
#nav li a.item4 {background-image:url('../img/image4.jpg')}
#nav li a:hover.item4 {background-image:url('../img/image4_over.jpg')}
#nav li a.item5 {background-image:url('../img/image5.jpg')}
#nav li a:hover.item5 {background-image:url('../img/image5_over.jpg')}
As above image displays that img1,img1_over,img2,img2_over
it means that when background position changes image display changes
By using CSS Sprites we are able to lighten up this interface.We may use one single image instead of 6 images.We can combine them into one big image.Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.
Now look at css after combining the images into one
#nav li a.item1 {background-position:0px 0px;}
#nav li a:hover.item1 {background-position:0px -72px;}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
#nav li a.item3 {background-position:0px -287px;}
#nav li a:hover.item3 {background-position:0px -359px;}
#nav li a.item4 {background-position:0px -431px;}
#nav li a:hover.item4 {background-position:0px -503px;}
#nav li a.item5 {background-position:0px -575px;}
#nav li a:hover.item5 {background-position:0px -647px;}

There is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

During this the HTTP Request time reduces and size of images reduces.This is done for only 6 images ,and if you are usimg it in your website then you will be able to find some dynamic changes.

CSS  Sprite Generator

What comes first in my mind,whenever I am thinking about creating a shadow text,just go to photoshop and uses shadow property(inner shadow ,outer shadow) ,but css3 provides a just a single line of code.
To apply text shadow onto an element, add this CSS property in its style definition.

text-shadow: 3px 3px 4px #000;

The text-shadow property looks cool, but it is currently not supported by major browsers including Firefox 3.0, but will be supported in Firefox 3.1 beta. Browsers that support this CSS3 property are Safari 3+, Konquerer, Opera9.5+ and iCab.

For example,

This text will show a drop shadow in Safari, Opera or other supported browsers.

Here first two values are offset of shadow from original text corresponding to right and top offset respectively while third numeric value is the amount of blur radius that causes pixels of the shadow text to stretch by the specified amount.

Positive values for right and top offset will position your shadow to right and bottom while negative values will change it accordingly.

You can play with offset and blur values to create really nice looking text effects just with CSS. If you have been using this property for a while and created some really nice looking effects, let us know in comments below.

Why text-shadow is good?
The main goal of this property is to give designers and css coders a tool to make text effects, which could only be done before by rendering text as images with all the side effects. Text rendered as an image isn’t searchable and therefore very undelicious for search engines. Another side effect is the fact that images can be way more bigger as one small line of code in terms of file size. As you may know most css-files, which contain the whole layout of a website, are smaller than one image on most websites. So it’s really clever to use a css function instead of images for reducing unnecessary traffic.