| 
Image sprites are nothing new, but their use in web design is trendy right now for good reason. An image sprite is basically one image that contains a bunch of other ones. By using a sprite, like the one on the left, which is used in SharePoint 2010 to display many icons, you can reduce the number of HTTP requests made and thus improve browser load times. Sprites have been around for a long time and have been used in video games as well as other applications. Take a look at the Wikipedia article as well as this article from A List Apart. By using CSS to map out the position of each individual image in the sprite, you can use this one master image to display several different icons on the page. Just take a look at the CSS below… element.style { display:inline-block; height:16px; overflow-x:hidden; overflow-y:hidden; position:relative; width:16px; } element.style { left:0 !important; position:absolute; top:-420px !important; } The image itself is contained within a SPAN tag that has a specified height and width of 16px X 16px to match the size of the RSS icon. Look at the first block of code above and note that the height and width are specified as well as the overflow-x and overflow-y properties. The overflow value of “hidden” means that the rest of the image that does not fit in the 16px box will be clipped or hidden for the user. The second block of code is used to display the RSS Feed icon at the bottom of a blog site by using positioning. The background positioning informs the browser where to position the sprite image. The RSS icon is located 420px from the top of the entire image sprite, so the value for left and top in our element style allows us to see just that particular icon in this sprite. 
|