Key ingredients
- Background image, like the above
- Fixed-width font, like Courier
- CSS letter-spacing property
- Ability to zero-pad numbers with your server-side language
The HTML<div id="counter">0003</div>
The CSS
#counter { /* adjust all styles below to fit your chosen font / size */
width: 68px;
padding: 1px 0 3px 3px;
font-family: Courier;
font-size: 18px;
letter-spacing: 7px;
background: url('/src/img/test.png') 0 0 repeat-x; }
Zero-Padding
With ColdFusion as an example, you might use the following code to zero-pad your counter:
<div id="counter"><cfoutput>
#NumberFormat(hits, "0009")#
</cfoutput></div>