How to use CSS Sprites for design and effects in websites

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

If you’re a web designer and want to employ tactics to improve website loading speed by keeping the appearance intact then you must know how to use CSS Sprites in designing and providing smoother effects to websites.

What is CSS Sprites

CSS Sprite is a technique wherein we combine multiple images into a single one, and then use the desired image using CSS properties.

Here is how a CSS Sprite image looks like,

css sprite image

And here is how we used the image in our website,

Using CSS Sprite image in website

Remember: We haven’t loaded different images separately but its all from a single sprite image shown above.

How to use: explained with tutorial

Here we’ll use CSS Sprites to create hover/mouseover effect that you commonly see in websites. However most designers still use the traditional way of doing this by loading different images separately that drastically slows down the website performance.

The most important thing while using CSS Sprite is the ‘background-position’ property of CSS. Using this property we control which part of a sprite image to show or hide.

First check this image,

css sprite image

Now look at the code,

<div id='button'></div>

<style>

#button
{
 width:230px;
 height:62px;
 background:url('img.png') left center;
}

#button:hover
{
 background-position:230px;
}

</style>

By default, we have a background image img.png to our button (at left-center or 0,0). When we move our cursor over the button, the background position shifts to 230px horizontally and hence background changes.

You’ll better understand by the figure below, have a look

demo css sprite image

And finally this is what you’ll get (just move your mouse over this),

<div id='buttonx' class='menubutton'></div>

<style>

#buttonx
{
 width:230px;
 height:62px;
 background:url('http://yourravi.com/wordpress/yourravi.com/uploads/2011/11/css-sprite-image1.png') left center;}

#buttonx:hover
{
 background-position:230px;
}

</style>

If you have any problem in understanding the tutorial, let me know and of course, don’t worry; its very simple, just exercise it and boost your website with faster performance and snazzier effects.

blog comments powered by Disqus