Backgrounds; colors and color effects

On elements like tables and sections with text, even the BODY tag, where you have a content making it possible to see the background, you can control the looks of the background, in this case in terms of coloring. For background colors you have the following options:

• Flat colors.
• Color gradients.
• Transparency.

Simple flat colors are done using the style background-color, and is quite simple, e.g.


which looks like this:




The default setting for filling of the background color is to the edge of the element on which it is applied, but it doesn't have to be like that. This is controlled using background-clip. For background-clip you have the following values:

Value	Effect
border-box	Default value. The background color goes to the edge of the element.
padding-box	The background color goes to the element border, if there is a border.
content-box	The background color starts at the upper left corner of the content.
initial	Sets the value to the default value
inherit	The value is inherited from the parent element

It can be very difficult to see the difference between border-box and padding-box, but here is an example on each, where the border is striped and 10px wide, so you can see the difference:

Using STYLE="background-clip:border-box"


Using STYLE="background-clip:padding-box"


Using STYLE="background-clip:content-box"

Color gradient have been a bit problematic, as the various browsers didn't handle them equally well, if they could do them at all. This means that today we have to piece a solution together, where all the new browsers use the same code, the older browsers need individual codes, and the old browsers need to have a flat color defined that they can use instead. Therefore: If you think color gradients are a bit of a bother, you are not wrong.

You have two basic types of gradients:

• Linear gradients, i.e. left-to-right, top-to-bottom, etc.
• Radial gradients, i.e. from a center going outwards.

Both are available in two versions, one where you have the gradient once, and one where the gradient is looped. Both will be shown in this section.

The style you use is called background, and you specify

• the color for the browsers that don't support gradients
• -webkit- for Safari 5.1 to 6.0 and Chrome 10.0 to 26.0
• -o- for Opera 11.1 to 12.0.
• -moz- for Firefox 3.6 to 15
• linear-gradient or radial-gradient for the rest, i.e. newer browsers

Do be aware that webkit is oriented in the opposite direction of the others, so webkit has to be left, when the other ones are right, etc. The general syntax for the two gradients are:

• background: linear-gradient(direction, color 1, color 2, ...);
• background: radial-gradient(form size position, start color, ..., last color);

The syntax will make more sense when we get to the examples in the next sections.

For the linear gradients you specify the direction and the colors the gradient have to go through, i.e. at least two. For direction you use left, right, top and bottom, or you specify an angle, e.g. 45deg for a 45 degree tilt. The directions can be combined, e.g. top right, making the gradient point towards the upper right corner of the element. Note that for the code for the new browsers also use the word to, i.e. to right and not just right.

So, if we create the class LinearGradient, which is linear from left to right with a color change from green to black, and green as the color for browsers that can't do gradients, the code looks like this:


On the page, it looks like this:



Three colors in a 10 degree angle then becomes


Notice that when you specify an angle, webkit has the same orientation as the other gradients and you don't use to on the last line.

On the page, it looks like this (the field has been made a bit higher so the angle is visible):




As the default, the colors are evenly distributed along the gradient, but this can be adjusted by specifying a percentage of the gradient after the color. If we use the previous gradient and specify the yellow color as 40 %, the code looks like this:


On the page, it looks like this (the field has been made a bit higher so the effect is visible):



Instead of relative sizes in percents, you can also use absolute sizes (px, cm, etc.), if is more useful.


Gradient also allows the gradient to be repeated. In that case, it is just called repeating-linear-gradient instead of linear-gradient. To make it work in practice, however, it does require a bit more than just writing repeating-linear-gradient instead of linear-gradient.

When you specify the color sequence, you start with the first color, without specifying the size. At the second color, you specify the distance at which the change has to be done. It can be both relative in percents or absolute, e.g. px or cm. The important part is that here, the distance means the distance from the starting point. The following colors are also color plus distance, and here it becomes important to be aware of the starting point. If first to second color has changed at 20px and second to third color also has the change over 20px, then at the third color it has to say 40px, and so forth.

If you don't specify a distance for the colors, the gradient will only be done once, like an ordinary linear-gradient. Choosing relative or absolute distances is a matter of personal taste and what works for the page.

If we try modifying the green to blue gradient from before, the code looks like this:


On the screen, it looks like this:



Having an abrupt change in colors with the color cycles, may not look so good, so here it may be beneficial to end the sequence using the first color, e.g.


On the screen, it looks like this:



By playing around with the combinations of colors and gradient angles, you can get some rather nice color effects on your backgrounds.

Radial gradients works just like the linear gradients, except instead of having an angle on the gradient, you move the center.

If we start with a basic color gradient from yellow to green, the code looks like this:


On the screen it looks like this:




Like the linear gradients, you can specify the size of the colors, both relative (percents) and absolute (e.g. px or cm). You can also specify a form. Here you can choose between ellipse, which is default, and circular. So, if we repeat the radial from before, only with 40 % yellow and make it circular instead, the code looks like this:


and on the screen it looks like this:




The diameters of the radial, i.e. how flat the ellipse is, can be adjusted according to you needs. This is done by specifying width and height, either relatively (percents) or absolute (e.g. px or cm). If we try to adjust the first ellipse to 50% width and 10 % height, the code looks like this:


On screen, it looks like this:




Placement of the radial's center is by default at the center of the element. This can also be changed. Placement consists of two parts, a distance from top/bottom and left/right and a specification of starting point. As starting point, you have the following options:

• closest-side
• farthest-side
• closest-corner
• farthest-corner (default)

The four placements themselves only move the center a little, as most elements have a regular shape, and as such only has a limited use. Distance from the edges on the other hand, offers some useful possibilities in regards to design. You should be aware that the minute you use placement, size, as shown above, is no longer working.


On the screen, it looks like this:




Like the linear gradients can have a repeating gradient, you can have repeating radial gradients, and you do it just like the linear gradients only the variable is called repeating-radial-gradient. If we use the green to blue gradient from above, the syntax for the radial version looks like this:


On the screen, it looks like this:



The width of the colors can, as shown with the linear gradients, be specified, either as relative or absolute sizes, according to preferences and what makes most sense for the object. Also, the placement of the center can be moved as described above.

If you want the background color to have some transparency/opacity, you can use either opacity or rgba color, but here you have to be aware of how much you want the transparency to be applied to. Opacity makes everything opaque, even the text, because opacity is a variable that is separate from background-color. For rgba, opacity is a part of the color itself, i.e. only the background color becomes opaque. Also, be aware that opacity does not work for Internet Explorer 8 and earlier versions, so if you want to accommodate for that, you need to use filter as well. So, if you want 50 % opacity on your background, the codes looks like this:


On the screen, it looks like this:




Like the color gradients, you can make opacity gradients. Instead of creating a gradient between two colors, you create a gradient between two opacities using rgba colors. It could be something like clear to white (here using a white background to accommodate for the older browsers where opacity does not work). Then the code looks like this:


On the screen, it looks like this:



You can, of course, have a gradient where the center of the transformation is displaced, here the transparent part is set to 75%:



Also you can have gradients spanning multiple colors. Here we have a 50% transparent red to a 100% white:



and you can, using the techniques from the color gradients, adjust angle, type etc.