How to Create CSS Image Sprites

In this article, you will learn How to Create CSS Image Sprites.

Example:-

<html>
<head>
<title>CSS Image Sprites</title>
<style>
#navlist {
  position: relative;
}
#navlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  top: 0;
}
#navlist li, #navlist a {
  height: 44px;
  display: block;
}
#home {
  left: 0px;
  width: 46px;
  background: url('home.png') 0 0;
}
#prev {
  left: 63px;
  width: 43px;
  background: url('pre.png') -47px 0;
}
#next {
  left: 129px;
  width: 43px;
  background: url('next.png') -91px 0;
}
</style>
</head>
<body>
<ul id="navlist">
  <li id="home"><a href="https://huboftutorials.com/"></a></li>
  <li id="prev"><a href="https://huboftutorials.com/category/jquery"></a></li>
  <li id="next"><a href="https://huboftutorials.com/cascading-stylesheet"></a></li>
</ul>
</body>
</html>

Read on Facebook

 

Leave a Comment