css sprite n.
Skip this Video
Loading SlideShow in 5 Seconds..
CSS Sprite PowerPoint Presentation
Download Presentation
CSS Sprite

Loading in 2 Seconds...

  share
play fullscreen
1 / 9
Download Presentation

CSS Sprite - PowerPoint PPT Presentation

177 Views
Download Presentation

CSS Sprite

- - - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

  1. CSS Sprite By http://www.psd2htmlwordpress.com

  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. 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. 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. 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. 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. 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. 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

  9. Thank You