Drawing with Stylesheets and Javascript

1. Introduction and Sample

Did you know that you can place animated drawings on your web page using nothing more than a few simple stylesheet entries and a few lines of javascript? Most people know that Javascript can animate things on your page. Not so many people realize that you can use just a few simple stylesheet commands to produce quite complex drawings and then use javascript to reduce the amount of code required to place them on your page.

Well now I am going to explain to you how you can do it. Here's the example animated drawing that we are going to use - a keyboard where the keys light up when the mouse moves over them.

Now if you had seen this on some other page you would probably think it was created using images and perhaps has them laid out in a complicated table in order to get them laid out correctly. Well the entire drawing is actually created using nothing more than 12 stylesheet commands and about 15 lines of Javascript and that includes the animated effect.

Of course the drawing that you want to include in your page will probably look completely different from this example but the description of how I created and animated this drawing should provide you with a reasonable idea of how you can go about creating and animating a drawing of your own using nothing more than a few stylesheet commands and a few lines of Javascript.

We'll start by looking at the stylesheet commands that I used.