Hans Sprecher

CSS Dot Matrix Counter

Hans Sprecher, @honzie

13.3.2013

Some ideas can instantly be recognized as bad ones. Or at least cringe-worthy ones. This was one of those ideas. This was the type of idea that could only be had after reading bits of an autobiography on writing AI games and drinking Elysian IPA. But it was simple enough:

Could I create a counter in pure CSS? Something that started at zero, and, with each click, incremented to nine, and then started all over again?

TL/DR, yes, this is possible, check out the pure CSS counter demo.

CSS for Interaction

JavaScript—simply put—exists to handle this type of interaction. Why drag poor CSS into the mix? All it did was try and abstract style form content.

But CSS is powerful now. It's a beast to reckon with. A bevy of intricate CSS selectors has existed since CSS 2.1, and these selectors were greatly expanded in CSS3. In particular, we can now control a few key things:

This has led to novel and interesting takes on pure CSS modal shadowboxes. In some ways, these are tour de force examples of what CSS can do. And that's exactly what I'm trying to create here.

The Escapment Mechanism

To get this to work, a couple things happen:

This relatively simple escapment is all that is required to increment a counter. Check out the pure CSS counter demo. An abuse of CSS? Perhaps. But it's interesting to push CSS to its limits and see what it can do.

Want to help me abuse CSS more? Drop a line to @honzie.