Hosting Solutions
mobile_logo Table of Contents

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>

CSS Videos

Sprite Sheet Work

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