CSS Sprites : What And Why ?

> definition and demonstration for taming your website graphics

The expression “CSS Sprites” stands for a HTML/CSS technique which consists in creating one single image containing several ones, with CSS used to select the parts of the composite image to display. The main asset of such a process is that it requires only a single image and only a single server call – making it much faster to load!

Somehow it’s like placing an opaque layer with a hollow window over your composite file, only what’s in the white part is displayed on the web page, the grey part of image remains invisible:

CSS-Sprites-explained

_____________________________________________________________________________________

Let’s now take a little demonstration to concretely see how this works: I’ll be taking a simple example with social medias buttons to place on a website. It was my very first time dealing with CSS Sprites, so I’ll be doing my best to make it clear and easy to understand!

Of course the use of CSS Sprites requires preparation, and it will actually change your design indentation habits.

1. Create composite image

Make it contain every version that will appear on the page: normal, on mouse-over, visited, etc… I’d recommend using PNG format: having a transparent background can help (especially with rounded corners for ex), what’s more image weight will remain quite light.

sprites

2. Set up HTML elements

Create a list of elements with a main “icon” class and sub “icon-#” class – this is simply to make future modifications easy. You don’t have to necessarily use a list, but to me it was quite logical.

(between <body></body> tags)

<ul class="icon">
 <li class="icon-1"></li>
 <li class="icon-2"></li>
 <li class="icon-3"></li>
 <li class="icon-4"></li>
</ul>

3. Set up style class for icons

The main thing to know here is that you'll be defining your composite image as a background for an item having a determined size. Also set your sprite image as a background for "icon" elements.

.icone li
{
 width: 60px;
 height: 60px;
 display: inline-block;
 background-image:url(sprites.png);
 background-repeat: no-repeat;
}

4. Position icons

Next on, we'll have to determine the position of the background image for each button to appear. To do so we only use the background-position property. Memo: the 1st number stands for x  axis (horizontal), and the 2nd one is for axis (vertical).

.icon-1{background-position: 0px 0px;}
.icon-2{background-position: -60px 0px}
.icon-3{background-position: -120px 0px;}
.icon-4{background-position: -180px 0px;}

The 1st icon is displayed from its left top corner (0px 0px): since the "hollow window" size 60x60 (which is the same size as button itself) everything below these points is not displayed - so at this point you can only see the light-blue button displayed.

For icons 2 to 4 you'll have to shift the composite image on horizontal axis - which is not hard to calculate: ex. icon-3 is the 3rd image in your composite file, each image being 60px wide so 3x60 = 120. Thus the x position of background image will be -120.

Not that hard, is it? Now you should normally see the 4 buttons in normal (inactive) state.

5. Position hover icons

To finish what's left is to define aspect of buttons when moving your mouse over them by using the alternative image version we designed: this is what will make your buttons look interactive, allowing users to understand they can click them.

This time we'll be dealing with the vertical axis of shifting, which is quite easy since we only have a 2-rows composite image: so for all 4 icons the y  interval will be -60px.

.icon-1:hover{background-position: 0px -60px;}
.icon-2:hover{background-position: -60px -60px;}
.icon-3:hover{background-position: -120px -60px;}
.icon-4:hover{background-position: -180px -60px;}

And... tadaaaa!!! Here's a very nice set of social buttons which aspect changes on mouse-over!

CSS-Sprites-in-action

_____________________________________________________________________________________

NB - images repeats are particular cases, for ex. used to create navigation bars, footers, etc...:

For repeat-x  you might organize your images vertically in your composite file, one below the other. On the other hand for vertical repeat (repeat-y) your sprite might be horizontally conceived:

CSS-Sprites-repeats

Now you've got everything to start making your own little tests to see what benefits you can get from using sprites in your web designs!

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s