CSS Sprites (Part 1/2)

Guest · 1 CSS Sprites (Part 1/2) Wed Dec 08, 2010 3:48 am

Guest

CSS Sprites (Part 1/2)
What is CSS sprites?

Hello dear members,

Today i am going to introduce you to CSS Sprites.At part 1(2 total parts) we are just going to make an introduction to CSS Sprites so that we get an understanding of what they are.Lets answer some things:

CSS Sprite?Whats that?

CSS Sprite is a collection of many images into a single image.

Some examples?

Here are some Smile

Facebook

Spoiler:

Twitter

Spoiler:

As you can see,facebook/twitter uses CSS Sprites.All of its images are stored into 2-3 images.At picture 1,you can see a variety of images into a single image as well as in picture 2.

Forumotion

Spoiler:

Also,rockerman's css sprite buttons Smile

Spoiler:

Apple

Spoiler:

What is the use of them?

CSS Sprites are used for hover effects,like navbars,icons etc or even single images.

Whats the advantage of them?

Your web page loads faster,you save bandwith and you dont get that "wait for the image to load" effect when hovering oven onother image which has hover effects.

That was just an introduction,in part 2 we are going to see how CSS Sprites work and how to use them Smile

Thanks for reading.

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.

Last edited by Nick on Mon Jan 03, 2011 9:36 pm; edited 4 times in total