Program The rantings of a lunatic Scientist

Colour Bar recreation in HTML

Javascript Web Dev

Last night whilst waiting for the NASA Curiosity landing, one of my friends was showing me his progress on his new CV / Portfolio Site, at the top of the page he had a banner of repeating coloured rectangles. It looked awesome, and he was even kind enough to link me the image.

It got me to thinking though, why use an image? It’s a simple enough effect, why not do it in HTML? And so at 5am I set to work on CSSDeck to see what I could do.

Before I show you the Code you can see running demos of project on CSSDeck

Here is what I came up with. Very simple HTML markup that allows you to either hard code a couple of elements or run the little JQuery function generate the markup for you for n elements.

It works very nicely and fills the whole width of the screen during resizes, but it is a little bulky for my liking. And essentially all we’re doing is drawing some simple colours… Surely this is a job for HTML Canvas? Right?

And so now, after another session of light development, here is a version using canvas. I couldn’t workout how to draw from the context of a 100% width canvas (I’m new to this technology), so I have split the function in two. A worker which initially calls the function and set up the resize event, and the function itself which does the drawing. The CSS has also been simplified and the colour HEX values moved into the Javascript array.