CSS Sprites have exploded on the internet in recent years and you can expect the trend to continue with mobile UI design leading the way. Although sprites are very current here to stay, they are by no means a new invention.
Looking back a few decades, you can see sprites being used in early video game interfaces when speed and memory were big issues needing to be worked around. We are again in a similar situation with mobile computing across seemingly countless different devices and connectivity scenarios. So how do sprites make it better? CSS sprites allow you to create a single file that contains all the images laid out in a grid, requiring only a single image and only a single server call.
In this example, there will be three images used to make what seems like one dynamic button to the end user. Each image represents how the user is interacting, if at all, with the button at any one time. These individual images are then mapped to certain coordinates. The coordinates are correlated to actions through CSS declarations.
This same idea can also be applied to multiple images merged into one interface element, such as a button menu on smart phone or tablet. If this concept interests you, you may also enjoy this recent post on how to manage opacity and transparency through CSS, which is one more way to elevate your user experience in regards to interacting with images.
Pingback: Slick Image Rollover Effect Made Entirely with HTML and CSS