Css Sprites is a collection of multiple images in one image.
Basically it is a technique to display the images on a web page.
As we know a web page contains many images and each image make a separate request to the server while page is loading.
It increase load on the server and most importantly increase traffic in the connection medium.
While with CSS Sprites only one request is made and only one image is downloaded from the server.
Also The thing that I like with sprites is that Complete page is formatted at same instant.
While with traditional way parts of page are loaded one by one.
I can guess you have doubts right now but Its damn easy.
Steps:
1.Take an image of small size but it should be transparent.(I used 1X1 dimension image).Lets call it trans.gif.
To make an image transparent just delete its background.Piece of cake if you have adobe Photoshop.
2.Use the img tag of html like this:
<img class="sprite" src="trans.gif" />
3.Now save the main image(that needs to be used to display) in the same folder.Lets call it image.gif
4.Create a style tag in head section of html like this:
<style type="text/css">
img.sprite
{
width:46px; //width of image that u wanna show.
height:44px; //height of image that u wanna show.
background:url('image.gif') 0px 50px; //TELLS THE STARTING POSITION YOU WANT TO TAKE {LEFT TOP} ----{0px denotes LEFT, 50px denotes TOP}
}
</style>
5.And its done.Ta-da.
Now advancing more in it.A thing is called hover which triggers its events when mouse is over the image.
This hover effect can used for other than images like it can be seen when u place your mouse over my blog's Heading.
Just Add this into your style sheet.
.sprite:hover{background: url(image.gif) 43px 0px;}
Try it Yourself.
Here is the complete code,
Copy paste in a notepad and save as abc.html and save two images below in the same folder as the same name:image.gif for big one and trans.gif for small one.
<html>
<head><title>Image Sprites</title>
<style type="text/css">
img.sprite
{
width:46px;
height:44px;
background:url(image.gif) 0px 0px;
}
.sprite:hover{background: url(image.gif) 0px 44px;}
</style>
</head>
<body>
<img class="sprite" src="trans.gif" />
</body>
</html>
Here are the two images that are used:
1.
2.
Basically it is a technique to display the images on a web page.
As we know a web page contains many images and each image make a separate request to the server while page is loading.
It increase load on the server and most importantly increase traffic in the connection medium.
While with CSS Sprites only one request is made and only one image is downloaded from the server.
Also The thing that I like with sprites is that Complete page is formatted at same instant.
While with traditional way parts of page are loaded one by one.
I can guess you have doubts right now but Its damn easy.
Steps:
1.Take an image of small size but it should be transparent.(I used 1X1 dimension image).Lets call it trans.gif.
To make an image transparent just delete its background.Piece of cake if you have adobe Photoshop.
2.Use the img tag of html like this:
<img class="sprite" src="trans.gif" />
3.Now save the main image(that needs to be used to display) in the same folder.Lets call it image.gif
4.Create a style tag in head section of html like this:
<style type="text/css">
img.sprite
{
width:46px; //width of image that u wanna show.
height:44px; //height of image that u wanna show.
background:url('image.gif') 0px 50px; //TELLS THE STARTING POSITION YOU WANT TO TAKE {LEFT TOP} ----{0px denotes LEFT, 50px denotes TOP}
}
</style>
5.And its done.Ta-da.
Now advancing more in it.A thing is called hover which triggers its events when mouse is over the image.
This hover effect can used for other than images like it can be seen when u place your mouse over my blog's Heading.
Just Add this into your style sheet.
.sprite:hover{background: url(image.gif) 43px 0px;}
Try it Yourself.
Here is the complete code,
Copy paste in a notepad and save as abc.html and save two images below in the same folder as the same name:image.gif for big one and trans.gif for small one.
<html>
<head><title>Image Sprites</title>
<style type="text/css">
img.sprite
{
width:46px;
height:44px;
background:url(image.gif) 0px 0px;
}
.sprite:hover{background: url(image.gif) 0px 44px;}
</style>
</head>
<body>
<img class="sprite" src="trans.gif" />
</body>
</html>
Here are the two images that are used:
1.
2.
No comments:
Post a Comment