CSS Sprite

By http://www.psd2htmlwordpress.com

What is Image Sprite

• The idea behind CSS sprite is to consolidate multiple

images into one sprite and then selectively display

portions of this sprite with positioning.

• It has its origin in Computer Graphics

• Sprites are the master image from which individual

images can later be pulled for website design as needed

by the code.

• Displayed as a static or dynamic background image

Advantages of CSS Sprite

• A web page with many images can take a long time to

load and generates multiple server requests. Using

image sprites will reduce the number of server requests

and save bandwidth.

• CSS sprites reduce HTTP requests

• CSS sprites are commonly used, particularly for

navigation (such as for hover effects), icons and buttons

Disadvantages of CSS Sprites

• Maintenance : Changing the size of an icon in a sprite,

also need to adjust the CSS to fix the positioning,

padding, or dimensions of the element

• Accessibility : While using background images we

remove the image tag from the markup, which could

reduce the meaningfulness of the content

Where are CSS Sprites Used

• CSS sprites are mainly used in a pixel based design.

• CSS sprites are used to keep the design maintainable

and easy to update.

How to create a navigation list using the

sprite image

• The following code shows the creation of navigation list

#navlist{position:relative;}

#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}

#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}

#home{background:url('img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}

#prev{background:url('img_navsprites.gif') -47px 0;}

#next{left:129px;width:43px;}

#next{background:url('img_navsprites.gif') -91px 0;}

How to add hover effect using image sprites

• The following lines of code can be used to add

hover effect

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}

#prev a:hover{background: url('img_navsprites_hover.gif') -47px -

45px;}

#next a:hover{background: url('img_navsprites_hover.gif') -91px -

45px;}

Contact Info

PSD to HTML Wordpress

www.psd2htmlwordpress.com

Y8,Block EP,Sec – v

Salt Lake, Kol – 700091,India

PH : +913340200838

Email:info@psd2htmlwordpress.com

Thank

You