Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

2. Hacking with Style > Hack 19. Hack Up Your Sprite and Put Your Images Inline...

Hack 19. Hack Up Your Sprite and Put Your Images Inline with Image Data URIs

Forget the hassle of ever constructing an image sprite again. You can use image data URIs to “inline” your image directly in your HTML or CSS.

Like butter goes with bread, sprites go with CSS. An image sprite combines a number of images together into one image. Then, instead of using image tags to display these images, you use CSS background images to display them. In CSS, you then alter the background position on your elements to display different portions of the sprite. Figure 2-19 shows a common sprite.

Image sprite pulled from Google Gmail application
Figure 2-19. Image sprite pulled from Google Gmail application

This sprite has just about every icon used within the Gmail application. Now let’s look at the code that turns this big image into each small icon.


  

You are currently reading a PREVIEW of this book.

                                                                                                                    

Get instant access to over $1 million worth of books and videos.

  

Start a Free Trial


  
  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint