CSS Sprites & Rollovers
CSS Sprites
CSS Sprites - HistoryThe origin of the term "sprites" comes from old schoolcomputer graphics and the video game industry. ...
CSS Sprites - HistoryIn 2004, Dave Shea suggested a simple CSS-basedapproach to CSS sprites based on the practiceestablish...
When the page is loaded, it would not load singleimages one by one (nor hover-state images perrequest), but would rather l...
Using the background-position property The background-position property defines the initial position of a background-image...
Using the background-position property    background-position: [horizontal position] [vertical position];                 ...
Using the background-position property The background-position property accepts one or two length values, percentages, or ...
Using the background-position property    background-position: [horizontal position] [vertical position];  #star{         ...
Using one sprite for multiple divs:
Using one sprite for multiple divs:                                      Image Sprite:
Using a sprite to create a CSS RolloverRollover Example: http://davidwalsh.name/demo/css-sprites.php                  Inac...
Using a sprite to create a CSS Rollover                                          The Image:
Using a sprite to create a CSS Rollover                  Inactive:                  background-position: 191px 0;         ...
Upcoming SlideShare
Loading in …5
×

Sprites rollovers

1,159 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,159
On SlideShare
0
From Embeds
0
Number of Embeds
592
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Sprites rollovers

  1. 1. CSS Sprites & Rollovers
  2. 2. CSS Sprites
  3. 3. CSS Sprites - HistoryThe origin of the term "sprites" comes from old schoolcomputer graphics and the video game industry. The ideawas that the computer could fetch a graphic intomemory, and then only display parts of that image at atime, which was faster than having to continually fetch newimages. The sprite was the big combined graphic. CSSSprites is pretty much the exact same theory: get the imageonce, shift it around and only display parts of it, saves theoverhead of having to fetch multiple images.http://css-tricks.com/css-sprites
  4. 4. CSS Sprites - HistoryIn 2004, Dave Shea suggested a simple CSS-basedapproach to CSS sprites based on the practiceestablished by those legendary video games. In thiscase, multiple images used throughout a websitewould be combined into the so-called “masterimage.” To display a single image from the masterimage, one would use the background-positionproperty in CSS, defining the exact position of theimage to be displayed. Any hover, active or focuseffects would be implemented using the simpledefinition of the background-position property for thedisplayed element.http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  5. 5. When the page is loaded, it would not load singleimages one by one (nor hover-state images perrequest), but would rather load the whole master imageat once. It may not sound like a significantimprovement, but it actually was: the maindisadvantage of the onMouse effects is that JavaScript-based hover effects require two HTTP requests foreach image, which takes time and creates thatunpleasant “flickering” of images. Because the masterimage is loaded with the whole page only once withCSS sprites, no additional HTTP requests are neededfor hover, active or focus effects (because the image isalready loaded), and no “flickering” effect occurs.http://coding.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites-techniques-tools-and-tutorials/
  6. 6. Using the background-position property The background-position property defines the initial position of a background-image. #star{ #star{ background-image: url(‘star.gif’); background-image: url(‘star.gif’); background-position: 0 0; background-position: 20px 20px; } }
  7. 7. Using the background-position property background-position: [horizontal position] [vertical position]; 20px 20px #star{ #star{ background-image: url(‘star.gif’); background-image: url(‘star.gif’); background-position: 0 0; background-position: 20px 20px; } }
  8. 8. Using the background-position property The background-position property accepts one or two length values, percentages, or keywords. Specify the horizontal position using one of the following keywords: left, center, or right. To set the vertical position, the following values are used: top, center, and bottom. background-position: left top; /* same as 0% 0% */ background-position: left center; /* same as 0% 50% */ background-position: left bottom; /* same as 0% 100% */ background-position: right top; /* same as 100% 0% */ background-position: right center; /* same as 100% 50% */ background-position: right bottom; /* same as 100% 100% */ background-position: center top; /* same as 50% 0% */ background-position: center center; /* same as 50% 50% */ background-position: center bottom; /* same as 50% 100% */
  9. 9. Using the background-position property background-position: [horizontal position] [vertical position]; #star{ #star{ background-image: url(‘star.gif’); background-image: url(‘star.gif’); background-position: left top; background-position: right bottom; } }
  10. 10. Using one sprite for multiple divs:
  11. 11. Using one sprite for multiple divs: Image Sprite:
  12. 12. Using a sprite to create a CSS RolloverRollover Example: http://davidwalsh.name/demo/css-sprites.php Inactive Rollover
  13. 13. Using a sprite to create a CSS Rollover The Image:
  14. 14. Using a sprite to create a CSS Rollover Inactive: background-position: 191px 0; Rollover: background-position: 0 0;

×