In this tutorial I want to show you how to use the CSS “CLIP” property. This property has many uses and one of them allows you to create sprites with inline image tags. Most of the time you are using a background image for your sprites but what about if you have an inline image?
Let’s first ask ourselves when do we use a background image and when do we use an inline image? Well a general rule of thumb is if it is content related, use an inline image and if its aesthetics or design related, use a background image.
Let’s have a look at the demo first:
CLICK TO DOWNLOAD SOURCE FILES
So for this tutorial let’s propose we have a content area with 3 icons we want to display. Since we want to use this in a content, we will use inline image tags. But doing so will require 3 separate HTTP requests for 3 separate images.
Let’s go back to why we’re using sprites in the first place. Sprites is ultimately for optimizing your site requests or load time if you will. By combining the images into one image you have accomplish two things. First advantage is that you have saved on the color table size per image. This means if you have 3 images, each image has it’s own color table thus increasing the size times 3. So many times you can see that the file size of the combine images is very close to the combined size of all separate images. Second advantage is that you saved on additional HTTP requests. For each image being served, the browser goes to the server to retrieve that image. So if you have 3 images, it will go out and fetch 3 times. Each fetch is using bandwidth…Have a look at the file size diagram below.
Just from the diagram above you should already see the benefit of combining 3 images into 1. You’re not only reducing the file size bandwidth but you’re also saving on the bandwidth to do two additional HTTP requests.
Ok let’s start by creating the markup HTML.
STEP 1 (HTML Markup)
HTML:
<body>
<div id="wrapper">
<img src="images/icons.png" alt="Happy Icon" class="icons happy" />
<img src="images/icons.png" alt="Sad Icon" class="icons sad" />
<img src="images/icons.png" alt="Angry Icon" class="icons angry" />
</div><!--close wrapper-->
</body>
A simple HTML layout of 3 image tags. Here is what the CSS looks like.
STEP 2 (CSS)
CSS:
.icons {
position:absolute;
top:0;
left:0;
}
.happy {
clip: rect(0 256px 128px 128px);
left:-128px;
}
.angry {
clip: rect(0 384px 128px 256px);
left:-256px;
}
.sad {
clip: rect(0 128px 128px 0);
}
Let’s dissect what the CSS means. Two important things to keep in mind while I explain. 1. It must be absolutely positioned and 2. You must slide back the image the same amount of pixel you declared to clip it. As you see we declared 2 class names. One is “icons” and the other is each name of the faces we are using. In our case “angry”, “happy” and “sad”. The class “icons” is set to position absolute with the left and top coordinates set to zero. So this will put the image at zero zero x and y to the relative container.
And then we have the class “happy”. This class utilizes the CSS property “CLIP”. This “CLIP” property is exactly as it sounds. It clips away the unwanted portion based on what you declared. The property takes the attributes “top”, “right”, “bottom”, “left”. In that order. For the class “happy”, the attributes are rect(0 256px 128px 128px). The “rect” stands for rectangle and it is saying clip off the pixels of the image from 0px and up – clip off the pixels from 256px and to the right – clip off the pixels from 128px and down – and finally clip off the pixels from 128px and to the left. This renders a clipped off rectangle. Keep in mind that the “happy” icon is in the second position from left to right in the image file.
Then you see a “left” property that has the attribute of -128px. What is that about? Remember the 2 things I had you keep in mind? Well since the happy icon is the second icon in the sprite image, we have to slide it negatively to the left 128px to reset the image into place at zero zero. If we didn’t do that, the image would appear out of place to the right 128px.
Next we have the class “angry”. The “CLIP” property says clip off the pixels of the image from 0px and up – clip off the pixels from 384px and to the right – clip off the pixels from 128px and down – and finally clip off the pixels from 256px and to the left. Keep in mind that the “angry” icon is in the third position from left to right in the image file.
For the “left” property, it is set to slide negatively to the left 256px because as you recall we clipped it by that much.
Finally we have the class “sad”. The “CLIP” property says clip off the pixels of the image from 0px and up – clip off the pixels from 128px and to the right – clip off the pixels from 128px and down – and finally clip off the pixels from 0px and to the left.
Take note that there is no “left” property declared for this class. The reason why is because it is the first icon in the image therefore there is no pixels to be clipped to the left of it so it stays in place.
Also take note that although it is clipping the image, it does not actually cut off the pixels but it simply hides it from view. Meaning the space of the hidden pixels are still there but just not shown as if you had a transparent pixels there to space out contents. That is why we needed to give it a “left” property to slide the image back into place.
This technique was tested on IE6+, FF, Safari and Chrome. Ok here is a little caveat. The proper attribute declaration of “CLIP” is with commas like this rect(0px,128px,128px,0);. But in my examples, you will see that I left off the commas. The reason for this is because with the commas, IE7 and below does not recognize the attributes and your layout will drop on its face. Take away the commas, IE7 and below is happy again. So the down side of not having the commas is your CSS will render invalid. But hey, at least IE peeps are happy right?
Please note that although sprites sound like an amazing technique, it is NOT always beneficial to use. So apply this technique only where it’s necessary.
Ok I hope you guys enjoyed that tutorial and put this technique to good use. Happy coding!
