CSS image sprite is a single image like a image-sheet with all
the images needed for your website.
Image sprites is having all the
images needed at one place in a
single image to it makes the browser
work easy while the browser try to
find the image path and hence the
image get loaded easily.
It lowers the number of HTTP
requests needed in a webpage to the
server which makes the page to be
loaded fastly.
Actually HTTP requests are done in
sequence i.e one request will not
start until the previous one is
completed,due to which opening a
connection to do a request is
expensive. So to reduce the amount
of requests made on the server and
increase the speed of the elements
to be loaded we use sprite image.
Image sprites can also makes images
swapping dynamically.
It can be coded inline via style
attributes.
It gives image roll over effect a
faster transition because the Hover
image is already loaded into the
browser it only needs to be shifted
in background-position.
Example:
Please see the example below to know about the implementation of image sprite.
HTML:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="bird1"></div>
<div class="bird2"></div>
<div class="bird3"></div>
<div class="bird4"></div>
</body>
</html>
CSS:
.bird1
{
background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll -1px -7px;
height: 119px;
width: 113px;
}
.bird2
{
background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll 180px -7px;
height: 105px;
width: 105px;
}
.bird3
{
background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll 210px -96px;
height: 112px;
padding-left: 21px;
width: 119px;
}
.bird4
{
background: rgba(0, 0, 0, 0) url("img/angrybirds.png") repeat scroll 305px 112px;
height: 95px;
width: 97px;
}
Note: Changing the css property of a list item on hover "perform" a little faster
since we only need to change the x,y instead of the whole src.
0 Comment(s)