In their tireless march to make every piece of premium software obsolete with free open source, HTML5 applications, Mozilla, alongside Google, has been been at the forefront of this endeavor. While some of the past examples have been really cool like WebRTC, the latest demo has a more practical purpose.

On the Mozilla Hacks blog, HTML5 evangelist Chris Hellmann shows off click highlighting and how it can be easily created using Javascript. If you’re new to click highlighting, it’s essentially the generation of a brightly colored dot that appears when you click. The longer you hold in the mouse button, the larger the dot becomes.

If you hold in the mouse button and move it around, the dot moves around with the mouse. This can be done with a little JavaScript magic where you generate a DIV element and move it with the mouse. Hellmann details the code for easy implementation:

The growing of the dot doesn’t use JavaScript, but rather CSS transitions. This is done by changing the scale of the dot from 0,0 to 1,1. Here’s the code for dot growth:

Hellmann says that it would be nice if they could keep everything in CSS, but that it’s impossible in some browsers. For those browsers, there is a method for changing CSS to JavaScript. It’s achieved through Clickhighlight.js with the source code currently available through Github.

Here’s a video demo of the application if you need more of a visual element for learning. Hellmann says that he envisions adding touch support and turning this into a bookmark tool. What other uses can you see for click highlighting? Let us know in the comments.