[Banners] Grimby's Guide to Advanced CSS Techniques

CSS Tips and Tricks

Gradients
Using gradients as background images can be a very effective style choice. They can be used as backgrounds in any or all of the following areas: MainMenuRow, BoardColumn, BoardRowA, and BoardRowB.

[image=http://www1.theforce.net/jc/images/banner-tutorial/gradient-example.jpg]

Here?s how it?s done. Create a gradient image in Photoshop (or other image editing program) and crop it to 1 pixel wide by about 15 pixels high. Save it in gif format for best results. Here is the CSS code you would use to add it to your stylesheet:

BoardColumn {
background: #3C3E6A url(gradient.gif) repeat-x;
}

Here we have added our gradient image as the background for the board column row. The background color defined here is the same color as the bottom of the gradient. ?repeat-x? means that it is repeated horizontally only. If this area is taller than the gradient image, the background color will be used to fill the remaining space. Keep in mind when creating your image that font sizes can vary greatly between computers, so make sure your background image will look good no matter how tall the area might be.

Borders
Borders can be an effective way to add a bit of flair to a simple-looking banner. Borders can be added to any of the following: MainTable, MainMenuRow, BoardColumn, BoardRowA, BoardRowB, and AuthorLink. I?ve done some different things with borders, including adding thick 2px-wide borders to only the sides of the MainMenuRow, adding a giant 4px-wide ?ridge? border to MainTable, and adding a 2px-wide ?groove? border to BoardRowA and BoardRowB. Speaking of which, there are 8 border types: solid, dotted, dashed, double, groove, ridge, inset, and outset. Check out this page for examples of each. Here?s an example of how to add borders to your stylesheet:

BoardRowA {
border: 2px groove snow;
}

[image=http://www1.theforce.net/jc/images/banner-tutorial/border-example.gif]

Hover States
Hover states can be fun to use on links to help them stand out on the page. These can be used on any links in the stylesheet, although the ones you probably want to pay the most attention to are BoardRowBLink (links in posts and signatures) and MainMenuLink (links in the header).
The most typical hover state for a link is to make it underlined when the pointer hovers over it. But there are plenty of other things you can do. One effective approach is to change the text color. Another is to change the background color. Or you can go crazy and do all three.
I should also mention here that in actuality, you can do just about anything to a link in the hover state, including changing the font, the weight from normal to bold, changing the style from normal to italic, changing the size of the text, and so on. While it?s POSSIBLE to do any or all of these things, none of them are really a great idea, as the text itself is altered and will affect its placement on the page, as well as the placement of other text and images, which can become annoying very quickly.
Here?s an example of specifying the hover state for links in posts:

a.BoardRowBLink:hover {
color: maroon;
text-decoration: underline;
background-color: lightgray;
}

Note: you do not have to specify every property that is defined in the normal link style, only the ones that are different.

Random Tidbits
Here are just some random suggestions that may help to create a better stylesheet:

• For SignatureText, use a slightly lighter text color than is used for BoardRowB (or a slightly darker text if you have a dark background and light text). This makes the text in a person?s post stand out more than their signature.


• Always make sure the link color is different that the text color. You should be able to immediately identify links without having to hover over them.


• Always make sure that the co