Bio: Designer, Creative, Graphic and Web Designer. 7 years experience on both print and web based solutions ranging from corporate identities to e-commerce CMS websites. I have worked on big blue chip client accounts including Tesco and Disney and smaller, simpler jobs but give every brief the same amount of respect.

general links

portfolio

sitemap

sprites

Sprites

Icons on websites are a great way of highlighting areas or pointing out pieces of information. Nut what if you are thinking about using loads of icons for a list of some kind or controls for a move perhaps? The use of sprites on websites is taking off with more and more people using them as opposed to multiple images which do the same thing.

Download example zip file

Using Sprites on a website

Below are a range of sprites that you might require on your website. The great thing about sprites is that their is less information to load. One image as opposed to multiples. We are simply using one image and postioning it in different places for each entry.

The example above is created using a ul Using one style we can create icons and then by using classes we can give each li within the ul a specific background image. This is particualry useful for when you have multiple images for lists.

With CSS 3 on its way, some browsers are already utilising its potential. The sprites above in some browsers will render with curved corners, whilst others use squared corners. Either way its degradable so its not a huge problem

#style {
		-moz-border-radius: 6px; -webkit-border-radius: 6px;
		}