Any hover, active or focus effects would be implemented using the simple definition of the background-position property for the displayed element. In this case, multiple images used throughout a website would be 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. In 2004, Dave Shea suggested a simple CSS-based approach to CSS sprites based on the practice established by those legendary video games. With CSS, the simple implementation of sprites was possible, and it was much easier and clearer than its JavaScript-based predecessor. Time passed, and at the beginning of the 2000s, when progressive Web designers started to seek alternatives to JavaScript-based rollover menus (with onMouseOver and onMouseOut effects), sprites saw a renaissance in Web development. You can click on the image for the larger version ( thanks, Ryan!). The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. The term was coined because the sprites seemed to “haunt” the display and didn’t really exist in the graphic memory. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers.
Quick sprites code#
One of the techniques developed saw sprites being plugged into a master grid (see the image below), then later pulled out as needed by code that mapped the position of each individual graphic and selectively painted it on the screen. Because the complexity of video games has continually increased, there was a need for smart techniques that could deal with detailed graphic objects while keeping game-play flowing. 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. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load.Īnd if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. In fact, they are a rather well-established technique and have managed to become common practice in Web development.
0 kommentar(er)
