CSS Image Sprites
What is the image sprites?
CSS sprites are the combination of the multiple images in the single image. It reduces the HTTP server request for them again & again.
View demo
Here is the example of the image sprites:
</html>
CSS sprites are the combination of the multiple images in the single image. It reduces the HTTP server request for them again & again.
View demo
Here is the example of the image sprites:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Image Sprites</title>
<style>
.anythingNav {
position: relative;
}
.anythingNav li {
margin: 0;
padding: 0;
float: left;
list-style: none;
text-indent: -99999px;
margin-right: 10px;
}
.anythingNav li,
.anythingNav a {
height: 30px;
display: block;
transition: all 0.5s;
}
.facebook {
left: 0px;
width: 30px;
background: url('anythingSpriteImage.png') 0 0;
}
.twitter {
left: 30px;
width: 30px;
background: url('anythingSpriteImage.png') -30px 0;
}
.linkedin {
left: 60px;
width: 30px;
background: url('anythingSpriteImage.png') -60px 0;
}
.googleplus {
left: 90px;
width: 30px;
background: url('anythingSpriteImage.png') -90px 0;
}
.youtube {
left: 120px;
width: 30px;
background: url('anythingSpriteImage.png') -120px 0;
}
a.facebook:hover,
a.facebook.active {
background: url('anythingSpriteImage.png') 0px -30px;
}
a.twitter:hover,
a.twitter.active {
background: url('anythingSpriteImage.png') -30px -30px;
}
a.linkedin:hover,
a.linkedin.active {
background: url('anythingSpriteImage.png') -60px -30px;
}
a.googleplus:hover,
a.googleplus.active {
background: url('anythingSpriteImage.png') -90px -30px;
}
a.youtube:hover,
a.youtube.active {
background: url('anythingSpriteImage.png') -120px -30px;
}
</style>
</head>
<body>
<div class="anythingNav">
<ul>
<li><a href="#" target="_blank" class="facebook active">facebook</a></li>
<li><a href="#" target="_blank" class="twitter">twitter</a></
<li><a href="#" target="_blank" class="linkedin">linkedin</a><
<li><a href="#" target="_blank" class="googleplus">googleplus<
<li><a href="#" target="_blank" class="youtube">youtube</a></
</ul>
</div>
</body>
No comments:
Note: Only a member of this blog may post a comment.