Have you ever looked at those beautiful gradtables that some people use to create lovely and complex forms, with one color shading into another color, and wondered how they know how to get the colors in the right places? This tutorial will show you how.
First, let's look at a clock face. There are 360 degrees in a circle or clock face and 30 degrees between each numeral on the clock face. We're going to draw imaginary lines from the center to certain numerals to get various degrees. First we establish the base line, which is 180 degrees.
180 degrees: A horizontal line drawn from the 9 to the 3 cuts the clock face in half. Counting up and over from the 3 (which we'll say is 0 degrees) to the 9 makes 180 degrees (horizontal). 30 degrees: from 3 up to 2 (diagonal)
45 degrees: from 3 to halfway between 2 and 1 (diagonal)
60 degrees: from 3 up to 1 (diagonal)
90 degrees: from 3 to 12 (vertical)
The 45, 90 and 180 degree gradangles are probably the most commonly used gradangles in making gradtable forms. The 30 and 60 degrees are used less commonly.
Gradangle 180:
To make the colors shade from top to bottom, we use the 180 degree gradangle. If you think of a square or rectangle, rather than a circle, then draw a horizontal line straight across its center from left to right, this is the direction of the 180 gradangle's gradient. It's good for giving form to horizontal items. In the gradform (table) below, you will see the effect of using this angle.
In the gradform or table above, the bgcolor is dark blue and appears on the bottom of the form. The gradcolor is turquoise and appears at the top. If you wanted the dark blue at the top, you would simply switch the color codes and not change anything else in the codes.
The rule for the 180 gradangle:
Bgcolor = bottom
Gradcolor = top
Gradangle 90:
Go back to our square or rectangle and now draw a vertical line through its center from top to bottom. This represents the 90 degree gradangle. It's useful for giving form to vertical rods and other forms. The shading will now look like the table below:
Using the same colors in the same places and changing only the gradangle from 180 to 90, now the dark blue bgcolor appears to the left and the turquoise gradcolor to the right. There are 2 ways you can reverse the colors:
1) do as suggested above with the 180 gradangle and switch ONLY THE COLORS;
or 2) change ONLY THE GRADANGLE by adding a minus sign or dash in front of the 90, like so: gradangle="-90"
1) The COLORS are switched in the above example, but the gradangle is still 90.
2) This time, instead of switching the colors, there's a minus sign or dash right before the 90, so the gradangle is "-90"
The rule for the 90 degree gradangle:
Positive 90 = bgcolor is LEFT; gradcolor is RIGHT.
Negative 90 ("-90") = bgcolor is RIGHT; gradcolor is LEFT.
Gradangle 45:
Back to the square: draw a straight line diagonally across the square from the right upper corner to the left lower corner. This line represents the 45 degree gradangle. Let's make a square, using the same colors as above and changing only the gradangle from 90 to 45:
As you can see, a positive 45 puts the bgcolor (dark blue) into the upper left corner, with the line of shading extending from upper right to lower left. A negative 45 will put the bgcolor in the upper right corner with the line of shading going in the opposite diagonal.
The rule for 45 degree gradangle:
The bgcolor always goes in one of the TOP corners:
Positive 45: Bgcolor = TOP LEFT
Negative 45: Bgcolor = TOP RIGHT.
Gradangle 60:
Refer again to the clock face as described above. 60 degrees goes from the 3 up to the 1. We'll do a square and a rectangle, both with a 60 degree gradangle:
Gradangle 30:
Again a square and a rectangle for comparison:
Rule for both 60 and 30 degree gradangles: see 45 degree gradangle above.
I hope this short tutorial has helped you determine where your selected colors will appear in your gradtable forms, so that you'll have better control.
To summarize the rules:
180 gradangle:
Bgcolor = bottom
Gradcolor = top
90 gradangle:
Positive 90 = bgcolor is LEFT; gradcolor is RIGHT.
Negative 90 ("-90") = bgcolor is RIGHT; gradcolor is LEFT.
60, 45, & 30 gradangles:
Positive: Bgcolor = TOP LEFT
Negative: Bgcolor = TOP RIGHT.
Misc gradangles: Default: you can omit the gradangle attribute from the gradtable. This gives you the bgcolor on the top (just the opposite of the 180 gradangle) and the gradient is from top to bottom. By using the default and switching the colors, you can save yourself a lot of bytes if you use the top to bottom gradient effects often on a page. If you use "0" as the gradangle attribute, you'll get the same effect as default - so there's no point in using "0," or the "180," for that matter. You can also use gradangles greater than 90 degrees. These give a different emphasis to the colors. A picture is worth a thousand words - SO ~
To see all these gradangles in action, please consult the Gradangle Chart. This chart includes the default as well as angles greater than 90 degrees. From this page is a link to a "slide show" of all the angles going around the face of the clock, as discussed above.
You can do your own playing around with gradangles with Tom Landrum's wonderful Grads on the Fly page.
Here's another tute by Sam (Sman) about gradcolors that shows the different gradangles arranged together for comparison.
For many examples of what is possible using gradtables with or without enhancements such as audioscopes, images and buttons, check out the Tandem Tables Gallery.
For individual help with tables and table art, you can write the Tandem Tooters, Tooters@tandemtables.com .
To join a wonderful newsgroup devoted to helping people learn table art, including the use of gradangles and audioscopes, please visit Rob's Interface NG
Visit these other tutorials by Flo.
