Yesterday I put up a new splash page for wedding photographer, Jules Bianchi. We worked together on the look as she had an existing site and blog that the page needed to match and she had a very specific idea of what it should look like.
Here is a screen capture of the new page:
It gave me a chance to use a new technique I had read about using “CSS Sprites”. I have to thank A List Apart, a site full of amazing resources and how-to’s which talked about this technique. Here is a link to their great Tutorial on CSS Sprites.
I will post a more technical version of how I tweaked their code to work for this situation later, but here is a quick explanation:
Very simply, instead of creating, editing and uploading eight images, all of the needed images are combined into one image. Then I just tell each button which part to use for the normal state and which part to use when the mouse hovers over it. The file size is smaller, so the page loads faster and if it ever needs to be edited or updated, I just download and edit one image instead of eight.
When Jules had mentioned wanting to mouse over photos to reveal her logos underneath, I remembered reading about this somewhere, so I gave it a try.