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