This Friday I wanted to learn some more about the new CSS3 viewport units so I decided to create a binary clock. Viewport units allow this clock to scale its size fluidly on any devices screen. Go ahead, try opening it up and resizing your browser, try making your browser window taller than it is wide or wider than it is tall – I’ll be right here waiting for when you get back.

Without CSS3 viewport units resizing like this wouldn’t be possible in CSS – you would have to fallback to using Javascript. Browser support isn’t too shabby, working in all the Major browsers including IE 9+ (although IE decided to use a different CSS property name than the other browsers, because thats how they roll).

How do you read a binary clock

Want some nerd-cred on how to read a binary clock? You start by looking at all those dots as columns, six columns to be exact. Now, the first two columns represent the hours, the next two columns the minutes, and the last two columns make the seconds.

With me? Now the dots that are lit up represent numbers – the lowest number on each column being 1 and the highest number being 8. All you do now is just sum of each columns numbers. Go ahead and give it a go on the image at the top of this page. You’ll get something like this:

So in this case the time is 04:17:36 when you push the numbers together. There, now you earned some nerd-cred.