CSS Sprites | What are They?
CSS Sprites most web developers should have heard this term, so what is it ?.
CSS Sprite bunch of other images transformed into one Big Image. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.
Adding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.
Here is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools and they will generate the Sprite for you.
CSS Sprite bunch of other images transformed into one Big Image. The origin of the term "sprites" comes from old school computer graphics and the video game industry. The idea was that the computer could fetch a graphic into memory, and then only display parts of that image at a time, which was faster than having to continually fetch new images.
Adding Sprites to our websites helps with webpage performance, since the webpage has to make only one request to the server, which will fetch the Sprite (the Big image) which includes all the other images that you want to use in your webpage. since the server makes only one request your page will load a lot faster compared to conventional way of linking each images separately.
Here is a demo on how to use CSS Sprites. further more there a many Sprite generators online to create CSS Sprites all you have to do is upload a bunch of images to these Online tools and they will generate the Sprite for you.
 |
| Signup image |
 |
| Signup confirmation image |
 |
| Two images made into one image |
As you see above the are two images called "Signup image" and "Signup confirmation image" are made into one Big Image using an online CSS Sprite Generator as you can see it above. Once we have our CSS sprite we can use it to our needs by specifying the CSS "background-position" property like so.
<!doctype html>
<html>
<head>
<title>CSS Sprites</title>
<style>
input{ width:300px;
height:70px;
background:url(result.png);
background-position: 0px 0px;}
input:hover{
background:url(result.png);
background-position: 0px -88px;
cursor:pointer;}
</style>
</head>
<body>
<input type="button" />
</body>
</html>
Comments
Post a Comment