CSS Image Sprites

Image sprite is a group of images merged into a single image. A web page with many images can take a long time to load as it generates multiple server requests. So, it helps the website load faster if you used image sprites instead which will reduce the number of server requests and save bandwidth. With CSS it is possible to display portions of such images separately wherever needed.

CSS Image Sprites Example

Here is an example of CSS image sprite from one of the leading online news portal.

This is the image sprite used in this example.

The image above is used as icons for navigation items in the navigation example below.

• World
• Politics
• Sports
• Economy
• Entertainment
• Others

Same image is added as background for all the navigation items above. The horizontal and vertical positional value of the background image to be displayed on each item varies from one another though. The background image size is defined to be 30 pixel wide and 24 pixel tall while the visible portion of the background image is either a few pixels left or right of each other.

Moreover, hover effect is added to those icons which make the background portion move a little up (33 pixels to be exact) and that adds another visually pleasing effect to the icons. Here's the code.

<ul class="demo">
  <li class="world"><a href="#"><span></span> World</a></li>
  <li class="politics"><a href="#"><span></span> Politics</a></li>
  <li class="sports"><a href="#"><span></span> Sports</a></li>
  <li class="economy"><a href="#"><span></span> Economy</a></li>
  <li class="entertainment"><a href="#"><span></span> Entertainment</a></li>
  <li class="others"><a href="#"><span></span> Others</a></li>
</ul>

<style>
.demo{
  display: flex;
  background: #393939;
  list-style: none;
  padding: 0;
}  
.demo li{
  width: 100%;
  background-image: url(arrow-border.png);
  background-repeat: no-repeat;
  background-position: left;
  background-position-x: 3px;
  line-height: 1.85em;
}
.demo li:first-child{
  background-image: none;
}
.demo li a{
  display: block;
  padding: 4px 10px;
  color: rgba(204,204,204,1);
  font-size: 14px;
}
.demo li a span{
  width: 30px;
  height: 24px;
  display: inline-block;
  background-image: url(nav-icons.png);
  background-position: 1px -1px;
  margin-right: 5px;
  opacity: 0.8;
  transition: 0.5s;
}
.demo li.world span{
  background-position: -92px -1px;
}
.demo li.politics span{
  background-position: -28px 1px;
}
.demo li.sports span{
  background-position: -91px -1px;
}
.demo li.economy span{
  background-position: -291px -1px;
}
.demo li.entertainment span{
  background-position: -326px -1px;
}
.demo li.others span{
  background-position: -400px 0px;
}
.demo li.world:hover span{
  background-position: -92px -33px;
}
.demo li.politics:hover span{
  background-position: -28px -33px;
}
.demo li.sports:hover span{
  background-position: -91px -33px;
}
.demo li.economy:hover span{
  background-position: -291px -33px;
}
.demo li.entertainment:hover span{
  background-position: -326px -33px;
}
.demo li.others:hover span{
  background-position: -400px -33px;
}
</style>

0 Like 0 Dislike 0 Comment Share Tweet