CSS Flip-Counter Experiment

December 5th, 2011 / Code

The biggest shortcoming of my flip-counter script is the difficulty in modifying the appearance of the counter—any styling changes require altering 70 different sprite states. I am constantly asked for a nice layered template that would make updating the counter easier, but unfortunately none exists. The best way to make the counter's appearance easily customizable is to get rid of the images entirely, and that was the goal of this experiment.

The promise of CSS

After seeing a demo from Codrops, I realized it was possible to recreate the counter with CSS, and used that demo as a template. The end result is a counter that uses zero images and has buttery smooth digit animations. Because it is styled entirely with CSS you can easily change colors, gradients, shadows, fonts, etc. without having to touch an image editor. Because it is based on my old counter script, it has all the same methods and functionality (add, step, smart increment, etc).

Limitations

It sounds great, but there is a major limitation: CSS 3D animations have very poor browser support. Currently it only works in Chrome, and curiously has issues in Safari. Non-webkit browsers see a static version. It is just a proof of concept, not ready for prime-time.

Demo

This demo no longer works. I'll write a new post with a re-written version soon.

You can test it out yourself below. I've included 4 sample styles for the counter: default, light, small, and huge. Switching between them changes a single CSS class name, that's it... Oh the joy of only using CSS.

This was just for fun, so don't use it on a production site unless you really know what you're doing.

New version

This broken counter finally got a reboot.