1. Technology
Send to a Friend via Email

Drawing with Stylesheets and Javascript

2. Stylesheet

clr gif

Because the keyboard drawing consists of a number of identical objects (eg. all the black keys are exactly the same size) we don't need too many stylesheet commands to define all of the elements that we need for the keyboard.

Here's the complete set of stylesheet commands that I used.

body, html {margin:0; padding:0;}
.clear {clear:both;height:1%}
.l {border-left:1px solid #ccc;border-right:1px solid #fff;}
.r1 {float:left; width:1px;height:60px;border-left:1px solid #ccc;}
.r2 {float:left; width:1px;height:30px;border-left:1px solid #ccc;}
.wt {float:left; height:60px; background-color:#fff;
border-top:1px solid #ccc} .wb {float:left; height:30px; background-color:#fff;
border-bottom:1px solid #ccc; border-left:1px solid #ccc;
border-right:1px solid #fff;}
.bl {float:left;width:11px; height:60px;background-color:#000;
border:1px solid #ccc}
.w12 {width:12px;}
.w14 {width:14px;}
.w19 {width:19px;}
.w20 {width:20px;}
.w23 {width:23px;}

The top line of the stylesheet doesn't really relate to the drawing at all. Setting the margins and padding on the page to zero makes sure that we don't inherit any default values that some browsers set that might interfere with the way that the parts of our drawing are laid out.

To be able to create our drawing we need to be able to decide how we are going to break the drawing up into its various parts. For the keyboard the obvious division is two rows of 36 elements each. The top row will contain the black keys while the bottom row will contain the part of the white keys that extends below the black keys. We will construct each row of the drawing by using float:left on each of the 36 parts to position it immediately to the right of the preceding part. So that each row starts at the left of the desired position we'll need to clear any prior floats. We'll also want to set the height of each row initially to zero to stop Internet Explorer converting whitespace in our code into a gap between the two rows.We define a class called .clear that we will be able to use to do this.

Some but not all of our white keys will require a left or right border so we define three more classes .l, .r1 and .r2 to define how we want these borders to look. We include a white right border on those keys that don't really need a border so that all browsers will consistently calculate the widths of the key and not misalign them because they did or didn't count a border.

The next thing to look at is the top section of the white keys that will be in the top row. As mentioned before, we want each of them to go immediately to the right of the previous key so we use float:left. This part of each key will be 60 pixels high and of course the colour of the key will be white. All of the top sections of our white keys will also have a top border. The .wt class will be used to set these attributes for the top part of each white key. As the keys are not all the same width we will define that separately.

The bottom piece of each white key will be 30 pixels high and will have a bottom and left border. The .wb class defines these.

Unlike the white keys, all of the black eys are the same size so the .bl class can provide the full definition for the black keys including the 11 pixel width, 60 pixel height, black colour, and borders on all four sides.

Finally the different parts of our white keys will be 12, 14, 19, 20, or 23 pisels wide so we define classes that will assign those widths.

By now you are probably wondering how those class definitions can be translated into the drawing you saw earlier. The secret is in how we combine the classes together in order to produce the desired components for our drawing. We do that via the HTML.

©2014 About.com. All rights reserved.