Hello GDB Forum! Today we are going to work with CSS Sprites.

Vocabulary
Sprites: A sprite is one image used to represent multiple. CSS is used to select the parts of the composite image to display at different points in the page. If a page has 10 1 kB images, they can be combined into one 10 kB image, downloaded with a single HTTP request, and then positioned with CSS. Reducing the number of HTTP requests can make a Web page load much faster. In this usage, the sprite sheet format that had been developed for use in game and animation engines is being applied to static images.

Okay let’s get started. In this tutorial, we will only be focusing our view on the code side of sprites. I will try to make another tutorial on how to create a sprite.

Okay, first step is you obviously need to obtain the sprite. For the purpose of this tutorial, I downloaded one from PurtyPixels.

Feel free to use this sprite.


Now that you have the sprite, open up your coding interface, in this case, notepad ++. You can use any software that you want as long as it allows you to save it as an html/css file.

Alright. Now for the code…

You want to always start with your html. Below is a bit of html that I wrote up for this tutorial.



I used a link statement to define my button by using <a class=”twitter”> This will allow me to customize the class within my CSS.

Alright. Now that we have the HTML down, let us continue onto the CSS.

The CSS is the hard part.

First, you want to define the a class.

So for your CSS, put



Alright, now that we have defined our class, let us start customizing.

One of most important things is the image.



There is our button. It will not show yet because we have to make some padding around it. So lets do that.



Now that-that is done. Let us move onto the hover effect. For the hover effect we are going to use :hover. This is the important part of sprites. Sprites do not change the image, they merely move it. So below I have set so that it will move it up 50px.



Now when you hover the image, it will automatically change the hover position.

That is all for this tutorial. I hope I was able to help you guys out with sprites and hope to see a bunch of people using them someday.

Thanks for reading!

Nice, simple, straightforward explanation. It's a simple technique, but it gives interesting results for website design.

_________________
Escort web design is best accomplished using a system that makes use of escort templates.