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).
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.
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.
This broken counter finally got a reboot.