counter

Counter styling with CSS

Key ingredients

  1. Background image, like the above
  2. Fixed-width font, like Courier
  3. CSS letter-spacing property
  4. 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>

Subscribe

  • follow us in feedly


Tagged .

Updated: 2011-05-09

Phil LaNasa