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 d...
Advantages of CSS Sprite• A web page with many images can take a long time to  load and generates multiple server requests...
Disadvantages of CSS Sprites• Maintenance : Changing the size of an icon in a sprite,  also need to adjust the CSS to fix ...
Where are CSS Sprites Used• CSS sprites are mainly used in a pixel based design.• CSS sprites are used to keep the design ...
How to create a navigation list using the                sprite image• The following code shows the creation of navigation...
How to add hover effect using image sprites• The following lines of code can be used to add  hover effect  #home a:hover{b...
Contact InfoPSD to HTML Wordpresswww.psd2htmlwordpress.comY8,Block EP,Sec – vSalt Lake, Kol – 700091,IndiaPH : +9133402008...
Thank You
Upcoming SlideShare
Loading in...5
×

Css sprite

235

Published on

This pdf is made by http://www.psd2htmlwordpress.com/ generating the ideas for CSS Sprite

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
235
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css sprite

  1. 1. CSS Sprite By http://www.psd2htmlwordpress.com
  2. 2. 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
  3. 3. 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
  4. 4. 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
  5. 5. 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.
  6. 6. 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;}
  7. 7. 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;}
  8. 8. Contact InfoPSD to HTML Wordpresswww.psd2htmlwordpress.comY8,Block EP,Sec – vSalt Lake, Kol – 700091,IndiaPH : +913340200838Email:info@psd2htmlwordpress.com
  9. 9. Thank You
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×