Skip to main content

How to use CSS Sprites.

I am not a web designer but i needed to show a before and after state for my restoration images. I had originally started with 2 images 'before' and 'after' side by side. This achieved the goal but didn't really give any wow factor.

I then tried a roll-over technique where holding the mouse over the image loads up a different one. But that meant the second image didn't load until the mouse was placed over it.

The solution was to use a CSS  sprite. This loads just one image made up of the before and after images. The clever bit is that the code only displays one half of the image. When the mouse is moved over it it shifts the image's position on the page to show the other half. But as it is still ALL one image it doesn't require any time to load it. Instant before and after states. Below is the original image and the CSS code I used. You can see the final result on the restoration page




You can see the final result on the restoration page

<-!
<center><style>#BIKE
{
  display: block;
  width: 215px;
  height: 300px;
  background: Url(http://www.pixelfix.co.nz/resources/Bikesprite.jpg) no-repeat 0px 0px; 
border-style:solid;
border-width:7px;
border-color:#FFFFFF;
}

#BIKE:hover
{ 
  background-position: -215px 0px;
}

#BIKE span
{
  display: none;
    }
</style>
<a id="BIKE" href="#" title="BIKE"><span>BIKE</span></a></center>


​->
Labels:

Comments

Post a Comment

Popular posts from this blog

Non destructive photo restoration with Photoshop

I posted this image a while ago now but today I thought i would add some explanation to my restoration techniques. I  always work in a non destructive method within Photoshop. The ability to work in layers means the original image can be left at the bottom layer for reference and all changes can be reversed. If you spend time making a good scan then it pays to make sure you can revert back to it at any time. So what layers do I use?  Well firstly I make a copy of the background layer. This enable me to run filters that can not be reversed such as dust and scratch filters. Above that you can see a clone layer. This is where all that obvious damage is repaired. Above that again is the dodge and burn layer. I do not use the traditional dodge and burn tool available in Photoshop. I prefer to use a soft light blending mode that can be adjusted and reversed if necessary. Next we have adjustment layers. These provide adjustment to the whole image, or just part...
Post a Comment
Read more

Restoring badly torn photograph

This has to be one of the most satisfying restorations done to date. The original was torn into many pieces and required extensive Photoshop work to be painstakingly pieced back together. The original scan was the key to making this a successful restoration and invisibly repairing the ripped pieces into one full image again. PixelFIX - Photo restoration and photos repaired, from $15. The restoration and manipulation specialists. Click here for 'fancy view'
4 comments
Read more