CSS - Sprites (Web 3.0) Tutorial

[litewarez]

Heya all,

ive been redesigning litewarez over the lsat few weeks and ive started to implement a new feature with css called sprites.

What it does:

Basically what you do is create on image containing more than one image then using css you will select the location of a particular image within your main image

this way you can have all your images with just one request this saves alot of bandwidth and speed for your users.

Heres an example of of what the image looks like HERE

here is an example of me using sprite for my download icons

/*This will load the image into the class name sprite_dlIcons*/
.sprite_dlIcons{background:url('../images/sprite_icons.png');}
			
/*Icons*/
	/*This will set the width of every icon*/
	.Icon{width:16px;}
		
		/*This is individual classes for each ic.. and there positions*/
		.tv{ height:16px; background-position:-0px -0px;}
		.template{ height:16px; background-position:-0px -16px;}
		.xxx{ height:16px; background-position:-0px -30px;}
		.other{ height:16px; background-position:-0px -46px;}
		.music{ height:16px; background-position:-0px -63px;}
		.movie{ height:16px; background-position:-0px -80px;}
		.game{ height:16px; background-position:-0px -98px;}
		.ebook{ height:16px; background-position:-0px -112px;}
		.app{ height:16px; background-position:-0px -130px;}

Here is the image that's used for the sprite

Ok so now the html for the icons

<div class="sprite_dlIcons Icon tv"></div>
<div class="sprite_dlIcons Icon game"></div>
<div class="sprite_dlIcons Icon ebook"></div>
<div class="sprite_dlIcons Icon app"></div>

now as you can see were setting multiple classes for the div.

the first to are going to be be loaded for all divs using the sprite and the last one is dynamic because they are select different pixal locations for the icons

if you wish to follow this up any further there;s plenty of information on Google
hope you enjoy my tip.

Helpfull Links:
Sprite Generator : Provided By -=MOD=-

litewarez Reviewed by litewarez on 9th May 2009. CSS - Sprites (Web 3.0) Tutorial Heya all, ive been redesigning litewarez over the lsat few weeks and ive started to implement a new feature with css called sprites. What it does: Basically what you do is create on image containing more than one image then using css you will select the location of a particular image within your main image this way you can have all your images with just one request this saves alot of bandwidth and speed for your users. Rating: 5

[SplitIce]

phpbb3 uses the same technique to acheive flickerless rollovers.

[Curtis129]

this only downfall would be when creating new aimages, to add to that image lol. other then that nice tut.
i use the rollover and the possition for my navbar

[Plutost]

Coool ! Nice Tutorial mate !

[Maz]

Nice tutorial i didn't know what you was on about before but now i do! i may try this one time

[litewarez]

Rollover can be used with sprites aswell.

heres the visual way to help you understand what pixals do what...

[litewarez]

the first css block is the width of all your images unless they vary you can place them within the individual css icon blocks so if you want to got H instead of V you will do summat like this

.Icons{width:20px;} // will set the width of each button to 20px;
//  |__20px__||__20px__||__20px__||__20px__|
// so by having for icons in a sprite that would mean the image is 4x20 = 80px wide

//Then you would change the individuals so do the following
.tv{ height:30px; background-position:-0px -0px;} //iamge 1
.app{ height:30px; background-position:-20px -0px;} // image 2

//what this does is sets the hight of the image to 30px and the first background-position is how many pixals from the left you want the image to start so and so on

hope this help you

[desiboy]

this may be helpful
http://spritegen.website-performance.org/

[litewarez]

Thanks @ -=MOD=- wil update post with that helpfull link!

[Luke]

This will work for different heights right?

If i do it like this

.ebook{ height:200px; background-position:-0px -112px;}

.app{ height: 200px; background-position:-0px -214px;}

?