Stock Indicator using CSS Sprite


Hits: 2649  

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

Published by

Sandeep Verma

I’m an Entrepreneur. I’m proud to work as Blogger, LAMP Programmer, Linux Admin, Web Consultant, Cloud Manager, Apps Developer, Searcher. Concentrate > Observe > Imagine > Launch