CSS Sprites Examples

Image Sprites Using CSS example


CSS Sprites is one of the technique which is used to reduce the page loading time and number of HTTP requests in a page. We can apply this CSS Sprites technique for background Images. for example if we use rich text editors we need to have images for bold icon, italic icon, Underline tag, link and smiles and more. If each icon is in separate image then totally we must have about ten to twenty images which lead to increase in HTTP request and bandwidth. By using CSS Sprites technique we can make all image into one.

Example for CSS Sprites


Here I'm going to use the below Image for three div tags
Image CSS Sprites Example
Source code

<style>
div #delete{
background: url('http://nscraps.com/image_post/CSS-Sprites.png');
background-position: -0px -0px;
width: 18px; height: 18px
}
div #edit{
background: url('http://nscraps.com/image_post/CSS-Sprites.png');
background-position: -0px -28px;
width: 20px; height: 20px;
}
div #add{
background: url('http://nscraps.com/image_post/CSS-Sprites.png');
background-position: -0px -58px;
width: 24px; height: 24px
}
</style>
Delete Icon:
<div id="delete"></div><br />
Edit Icon:
<div id="edit"></div><br />
Add Icon:
<div id="add"></div><br />

Output:

Delete Icon:

Edit Icon:

Add Icon:


Related Topic What are all the Types of Networks and their Scales, Scopes and Purposes
What are all Common use of SSH for UNIX and Linux systems
What is OSI Model and its Layers in Communication System
Javascript Date Object Constructor with Examples
HTML XHTML Basic Structure and Elements
CSS  

nScraps.com 2011   Privacy Policy  Terms of Service  Feedback