After hearing about image sprites and seeing them around all the new themes I decided to learn how to make these from scratch.
The reason image sprites are so good is because instead of using multiple images for a series of icons for example, you can use one large image. Using CSS, assigning different classes to show different sections of one big image. This makes your website load a lot faster and is much cleaner in the code.
So for instance here is an image sprite I created in Photoshop (I then cropped a section, see above). This is to display the facebook icon, and the icon when it hovers. So we will see just the grey icon, then when we hover it changes to the blue icon.
We only want to see one section of the image at a time, then once we hover we see the top section. The Html will display the class for the button also with the anchor tags to link it.
Here is a really good explanation from Chris Coyier on image sprites.
And here is my code example:
Explanation: So we have the social media icons set out as a list. The ‘div id’ is wrapped around the ‘anchor tags’ you can also display these out as a normal list using the ‘ul’ but here I’m just using the div and the anchor tags. The div id applies to all elements inside the list (all our icons) and then each ‘anchor tag’ is an icon.
The :hover codes are where we change the position of the image so when we hover it shows a different section of the icon, as default for example the Facebook icon is grey. When we hover the background-position moves the background image so we see the blue Facebook section of the image. Pretty simple and great to do from scratch.