Stock Indicator using CSS Sprite

An image/css sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests. So, using image sprites we can reduce the number of server requests and save bandwidth.

CSS Sprites can be generated using online Tools or Photoshop 😉

CSS Sprites generator

<div style="position: relative; overflow: hidden; height: 38px; width: 270px;" id="dvTraffic2">
<img alt="Integer 1" src="white_numbers_big.png" style="position: absolute; right: 1px; top: -333px;">
<img alt="Integer 2" src="white_numbers_big.png" style="position: absolute; right: 35px; top: -37px;">
<img alt="Integer 3" src="white_numbers_big.png" style="position: absolute; right: 69px; top: -74px;">
<img alt="Integer 4" src="white_numbers_big.png" style="position: absolute; right: 103px; top: -370px;">
<img alt="Integer 5" src="white_numbers_big.png" style="position: absolute; right: 137px; top: -148px;">
<img alt="Integer 6" src="white_numbers_big.png" style="position: absolute; right: 171px; top: -185px;">
<img alt="Integer 7" src="white_numbers_big.png" style="position: absolute; right: 205px; top: -370px;">
<img alt="Integer 8" src="white_numbers_big.png" style="position: absolute; right: 239px; top: -111px;">
</div>

CSS Sprite

Download Stock Indicator from here …. sprite.zip