Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

Web Design Sprite Sheet Preload Graphics Tutorial

Learn to use sprite sheets to skin interactive elements in your software and web sites. First we will demonstrate how it works, then we will discuss the many benefits it provides at the end of the exercise. Get icons.png Sprite Sheet <style> body{ background: #444; } .icons{ background: url(images/icons.png); width: 50px; height: 50px; border: none; outline: none; cursor: pointer; margin: 10px; } #rss_btn{ background-position: 0px 0px; } #rss_btn:hover{ background-position: 0px -50px; } #rss_btn:active{ background-position: 0px -100px; } #plus_btn{ background-position: -100px 0px; } #plus_btn:hover{ background-position: -100px -50px; } #plus_btn:active{ background-position: -100px -100px; } </style> <button id="rss_btn" class="icons"></button> <button id="plus_btn" class="icons"></button>
thumb

CSS Videos

Sprite Sheet Work

Sprite keyframes Animation Bouncing Ball TutorialCharacter Walk Cycle keyframes Sprite Animation TutorialWeb Design Sprite Sheet Preload Graphics Tutorial