CodePen: A Great CSS Tool For Your Immediate Use

As you may have figured out by now, there's a plethora of cool things you can do with just a touch of CSS scripting ability. As the language progressively evolves and the services that streamline it continue to narrow down into a fine laser, more and more websites are cropping up with insane effects that normally would have only been possible with HTML5 or Adobe Flash. We all remember the days of Flash, and thankfully, they're mostly behind us now.

However, you may not yet understand the extent of good CSS design. That's why I'd like to show you a CodePen page that was created as a proof of concept by yet another wonderful developer who knows his or her stuff when it comes to building the faces of the Internet. Check out this Simpsons donut-themed progress bar, which uses a series of cause and effect commands to correlate clicking the arrows with coordinated results that end in a very smooth and functional result.

I myself am not a Simpsons fan, so if it were me creating a page with this effect, I'd find another theme to do it with - say, Halo portraits with 343 Guilty Spark replacing the donut icon. I'm not actually sure what I'd do with it myself, but there are plenty of creative minds out there that'll go one step beyond and make a practical application from the concept. The first thing that comes to mind in that regard is a progressively unfolding story or set of instructions that open up step-by-step.

One of the problems some people have noticed with this CodePen concept is the lack of support for keyboard inputs or rapid progression through the series. If you decide to rip the scripts to make it your own, remember that you should ideally shoehorn the added functionality in for the sake of your visitors. Take note that whatever changes you make, efficiency is going to be a key factor since there's a degree of animation that depends on the scripting syntax, and one or seven unnecessary CPU cycles can spell differences in the end result.