HTML and CSS Reference
In-Depth Information
.twitter{
background-position: -269px 0;
width: 256px;
height: 256px;
}
.yahoo{
background-position: -8px -252px ;
width: 256px;
height: 256px;
}
.yelp{
background-position: -269px -252px ;
width: 256px;
height: 256px;
}
.youtube{
background-position: -531px 0;
width: 256px;
height: 256px;
}
.rss{
background-position: -531px -253px ;
width: 256px;
height: 256px;
}
As you can see from our example, we initially set a background image to our social icon classes by writing
background: url(sprites.png) no-repeat; Then based on the class assigned, we simply offset the background image
at a specific X,Y location in order to just show the portion of the image were looking for. Sprite sheets are all over the
Web. In fact, even the popular
Apple.com
navigation bar consists of a sprite sheet. (If you view the source, you'll find
that one single request goes to
http://images.apple.com/global/nav/images/globalnavbg.png
.
) So get creative,
experiment with them, and keep optimization in mind, along with fewer requests to the server. Animated GIF sprite
sheets anyone?
Last, a very good tool for creating sprite sheets is straight-up Adobe Flash CS6, but it comes at a steep price
point. So if you don't have Flash available, I recommend you download the AIR application Zoe, by Grant Skinner and
his team (
http://easeljs.com/zoe.html
)
or use a few free online-based tools called SpritePad (
http://spritepad.
wearekiss.com
a personal favorite) and SpriteCow (
http://spritecow.com
)
. Go to
http://css-tricks.com/
css-sprites
for more detailed information on sprite sheet uses.
Sprite Sheets on Mobile
In mobile development, where we all often try to save on HTTP requests to a server due to the possibility of
inconsistent network connections, sprite sheets are a huge advance in ad optimization. Ideally, the goal is to use as
little imagery as possible in mobile and go the route of SVG,
canvas
, or font-based icons rather than bitmaps due to
higher pixel density screens and increased file size, but sometimes there's no way around it. Understandably, there are
many different views on this situation, whether it be animated GIFs or sprite sheets using CSS and JavaScript. Either
way, just make sure you understand the needs and goals of the campaign as well as your users experience. It's far less
work to make updates to one sprite sheet as a Photoshop (PSD) file rather than thirty independent images needing
to be reedited and reexported. If you're interested in learning more about this topic and enjoy listening to people talk
about these topics, I suggest you check out the
5by5
talk show
Hypercritical
, specifically episode 61,
