Sprites
What Are CSS Sprites?●   The term “sprite” (similar to “spirit,” “goblin,” or    “elf”) has its origins in computer graphi...
What Are CSS Sprites?●   With CSS Sprites multiple images are used     throughout a website which are combined into     th...
The advantages of using sprites are:●   Fewer images for the browser to download,     which means fewer requests to the se...
How Does The background-      position Property Work?●   According to CSS specifications, the     background-position take...
●   Using this property, you can define the exact     position of the background image for the     block-level element (li...
●   If background-position: x% y%, the first value       is the horizontal position, and the second       value is the ver...
●   As SitePoint’s reference article explains: “a     background-image with background-position     values of 50% 50% will...
Demo●   I have a color version and a grayscale version      which I have merged into one file as you      can see below.
●   When the image initially loads, I want the     grayscale version, which is on the right site.●   For this reason, I se...
Further Reading/Referances    List Apart>      http://www.alistapart.com/articles/sprites/    Smashing>        http://codi...
Upcoming SlideShare
Loading in …5
×

CSS Sprites

1,214 views

Published on

CSS Sprites class presentation

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,214
On SlideShare
0
From Embeds
0
Number of Embeds
209
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

CSS Sprites

  1. 1. Sprites
  2. 2. What Are CSS Sprites?● The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware.● Sprites were plugged into a master grid, then later pulled out as needed by code that mapped positions of each individual graphic, and selectively presented them on the screen.
  3. 3. What Are CSS Sprites?● With CSS Sprites multiple images are used throughout a website which are combined into the so-called “master image.”● To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed.● Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element.
  4. 4. The advantages of using sprites are:● Fewer images for the browser to download, which means fewer requests to the server.● Total images size is generally smaller, so less download time for the user and less bandwidth consumption.● No ugly mouseover code. No JavaScript -- only CSS!
  5. 5. How Does The background- position Property Work?● According to CSS specifications, the background-position takes two (optional) arguments: horizontal position and vertical position. For example:
  6. 6. ● Using this property, you can define the exact position of the background image for the block-level element (list item li). You can use either % or px units (or mix both) to define the starting position (i.e. the upper-left corner) of the displayed part of the master image. Alternatively, you could use the following keywords: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.
  7. 7. ● If background-position: x% y%, the first value is the horizontal position, and the second value is the vertical position. The top-left corner is 0% 0%. The bottom-right corner is 100% 100%. If you specify only one value, the other value will be 50%.● … then the background-image will be positioned 19 pixels from the left and 85 pixels from the top of the list item element.
  8. 8. ● As SitePoint’s reference article explains: “a background-image with background-position values of 50% 50% will place the point of the image that’s located at 50% of the image’s width and 50% of the image’s height at a corresponding position within the element that contains the image.● This causes the image to be perfectly centered. This is an important point to grasp — using background-position isn’t the same as placing an element with absolute position using percentages where the top-left corner of the element is placed at the position specified.”
  9. 9. Demo● I have a color version and a grayscale version which I have merged into one file as you can see below.
  10. 10. ● When the image initially loads, I want the grayscale version, which is on the right site.● For this reason, I set the links initial background position 191 pixels to the left. (image size> width:191px; height:151px; )● When someone mouseovers the link, however. I want to show the color version. Its only then that I remove the 191 pixels.
  11. 11. Further Reading/Referances List Apart> http://www.alistapart.com/articles/sprites/ Smashing> http://coding.smashingmagazine.com/2012/04/11/css-sprites-revisited/#more-129723● http://www.smashingmagazine.com/2011/11/23/exporting-from-photoshop/● http://coding.smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance/ CSS Tricks>● http://css-tricks.com/css-sprites/ W3school >● http://www.w3schools.com/css/css_image_sprites.asp

×