Chris Nanney

CSS Flip-Counter Experiment

December 5, 2011 (Updated January 4, 2012)
This post is over 12 years old

In the world of web development, this is ancient. What you see here may no longer be a good idea or in alignment with best practices. I've left the content mostly as-is, besides minor fixes for typos or dead links.

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 experimental demo has been broken for a long time, but I'm leaving it here as it originally was.

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.