How To Make Css Sprite Images?

"You are aware of the word Sprite, and first thing that strikes your mind after hearing this word is the Sprite i.e. soft drink from the Coca cola firm. But sorry we are not talking about any drinks here. We are talking about designing trends." Let's check that out

A sprite image is a collection of images put into a single image . It is mainly used in developing any website/blog. Reason behind using such technique is to reduce the load time taken by website, because if there will be many images on your website/blog then it will take time to load or may be some of the images will not load also.

Below is an example of the sprite image

Image Source- Css Tricks

Before jumping on how to use sprite images we must first learn how to create this images using Photoshop?

Step#1 Working In Photoshop

First choose the image of your choice and open all of them in Photoshop and resize them by

Select the Image to be resized.
Open Image option from menu
Image Size
Now enter the desired size of image and OK the changes.

We have chosen three images together as shown below

Now we will add some effects in this sprite image

After selecting the image layer we duplicated it ( by pressing Ctrl+J)
Then placed the duplicate image just on the top of the parent image.

Now we added some effects on the duplicated image from Image→Adjustments→Channel Mixer
We have changed the color here bu using color mixer you can also turn it into Black & White image using Desaturate option (press Ctrl+ Shift+U) or any other option of your choice.
Now the output we got was like this

So now our work in Photoshop gets over here. Moving to the next step we will see that how can we use this sprite image in our blog/website development.

Before jumping on to next step I want you to visit this demo here. You can see that image gets colored on hovering the mouse.

Que. But the question is how to create this?
Ans.You can create this using sprite image.

In step#1 we have already created a sprite image out of three different images.

Dont Just Blog

Step#2 Working with Codes

In this step we will be learning how to imply sprite images in your web/blog designs.

Html

<div class='sprite'>
<div class='sprite-container'>
  <ul class='lists'>
  <li class='dont_blog'><a href='#'></a></li>
  <li class='Lorem_ipsum'><a href='#'></a></li>
  <li class='design_matters'><a href='#'></a></li>
  </ul></div>
</div>

Now Let's Animate it using Css properties.
Now we are going to style the parent element of sprite image container.

Css

.sprite{width:100%;

  padding:0 10px;
}
.sprite-container{
  display:block;
  width:1000px;
  height:200px;
  overflow:hidden;
}

.lists, .lists li{list-style:none;
float:left;}

<div class='sprite'> is set to to 100% width which is auto resizable.

Well we are going to apply the styles directly on the list class so even if you don not style the<div class='sprite-container'> then also it will not mess up with your work.

<ul class='lists'> and lists are styled list-style:none & float:left
list-style is set to none which define the lists to have no list-style, that means now we can make the lists to float to left horizontally.

Now styling the different lists class

Css

.dont_blog{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg)repeat-x 0px -120px;

  height:120px;
  width:272px;
}
.dont_blog:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg) repeat-x 0px 0px ;
}

.Lorem_ipsum{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg) repeat-x -272px -120px;
  width:290px;
  height:120px;
  float:left;
}
.Lorem_ipsum:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg) repeat-x -272px 0px;

}
.design_matters{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg) repeat-x -560px -122px;
  width:260px;
  height:120px;
}
.design_matters:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg) -560px 0px;
}

Step#3 Play With The Codes

This is the fun part of this tutorial, try it and learn it. We are not going explain anything now. We will just provide a demo link of ours and you have to play with it by changing the codes and watching the effects happening live. But before playing you must know the below given things

# You Need To Know This?

We are using a Css pseudo element i.e. hover and we have defined it with background position property along with hover.

This will change the position of sprite image on hovering the mouse over the image and you will see the color of image being changed.

# Where Is The Background Position Property in Code?

Here is a small piece of code from above

Css

.Lorem_ipsum {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg);
background-position-x: -272px;
background-position-y: -120px;
background-repeat-x: repeat;
background-repeat-y: no-repeat;
width: 290px;
height: 120px;
}

Above is the extended version of the Css code given here below

Css

.Lorem_ipsum{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLxaxRpbC8vTMEApiJX0VHTlvaZt_K_XksSuNopM7ORqtXqK261EqijnkLm1RzBP9qyBqtgI6quqkc7NVNwX6cqIFUPeLQFl5PmGiSWpZzWaDhlfVVwUncvbVkmyawzD0UTIbGOdA7fg/s1600/Untitled-5.jpg)repeat-x -272px -120px;

  width:290px;
  height:120px;
  float:left;
}

Observe both the codes above and imply which makes you comfortable while working with the code.

#Start Playing

Now you must start playing with the code and start creating your own sprite images. Use your creative mind and make out new things from it. All the best

Demo