Tip:
Highlight text to annotate it
X
Hi and welcome to this week's web design video blog.
Today we're going to talk about designing websites using CSS sprites.
Firstly we're going to explain what CSS Sprites are, secondly how they work and thirdly why
they are becoming very popular with web designers.
If you're not already familiar with CSS Sprites you've probably come across the term on blogs,
in books or magazines.
Traditionally, web design elements like navigation bars, icons and backgrounds are 'sliced' into
pieces and then stuck back together using HTML & CSS.
The initial thought process behind this was that the website would load gradually, tricking
the eye into thinking the website was loading quickly.
A CSS Sprite is one single image that contains a patchwork of some or of all the images that
might be shown on a particular page.
Then, using CSS and a little maths, the designer can display a specified part of this image
by defining their co-ordinates.
The best way to show you a CSS Sprite and to explain how they work, is to check out
a well known, live example of a CSS Sprite in action.
So we're on Apple's website and we are going to look at their very distinctive and respected
navigation bar.
You can probably see from looking at it that it has several states.
Theres an 'off state', a 'hover state', there's a state which shows you which page of the
website you're on.
And there's also a fourth state for when you click the navigation like so.
So if we take a look at the CSS sprite image for the navigation, you can see that this
is just simply one image,
And it shows all four states of the navigation.
Now what CSS Sprites does, is it loads this image just once, through the stylesheet,
And then using co-ordinates you can select a particular part of the image and only show
that proportion.
So to help me explain this, I've put something together in Illustrator.
So i've set that navigation background and then I've just created like this sort of pink
mask just to show you how this would work.
So for example, using the co-ordinates you could just pin-point the particular part of
that image to load for all of the states required in your navigation.
Adopting CSS Sprites can be a daunting prospect, particularly if you're used to slicing your
images and working with them individually.
However it's important to understand why the CSS Sprite technique is being used more and
more by professional web designers.
Firstly, there's the fact that you can be a lot more organised - Less images and less
code.
Secondly and more importantly, page speed.
Combining your icons and images into a single graphic will usually result in an overall
smaller file size.
Plus your website will be making far fewer HTTP requests, having to only load a single
image instead of multiple smaller ones.
Smaller file sizes and fewer HTTP requests give you a faster loading website, resulting
in a better user experience and happy search engine spiders.
Thanks for watching this week, if you have any questions or comments, please leave them
on our supporting blog post or our YouTube Channel.