Backgrounds; colors and color effects




Backgrounds

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

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

<DIV STYLE="background-color:#FFFFFF">Text on white background</DIV>

which looks like this:

Text on white background



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:

ValueEffect
border-boxDefault value. The background color goes to the edge of the element.
padding-boxThe background color goes to the element border, if there is a border.
content-boxThe background color starts at the upper left corner of the content.
initialSets the value to the default value
inheritThe 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"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="background-clip:padding-box"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.


Using STYLE="background-clip:content-box"
'Hullo, Mole!' said the Water Rat.
'Hullo, Rat!' said the Mole.
'Would you like to come over?' enquired the Rat presently.
'Oh, its all very well to TALK,' said the Mole, rather pettishly, he being new to a river and riverside life and its ways.
The Rat said nothing, but stooped and unfastened a rope and hauled on it; then lightly stepped into a little boat which the Mole had not observed. It was painted blue outside and white within, and was just the size for two animals; and the Mole's whole heart went out to it at once, even though he did not yet fully understand its uses.






Color gradients in general

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:
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
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:
The syntax will make more sense when we get to the examples in the next sections.


Linear color gradients

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:

<STYLE>
.LinearGradient {
   background: #40FF00;
   background: -webkit-linear-gradient(left, #40FF00, blue);
   background: -o-linear-gradient(right, #40FF00, blue);
   background: -moz-linear-gradient(right, #40FF00, blue);
   background: linear-gradient(to right, #40FF00, blue);
}
</STYLE>

<DIV CLASS="LinearGradient">Text on background with green to blue color gradient</DIV>

On the page, it looks like this:

Text on background with green to blue color gradient


Three colors in a 10 degree angle then becomes

<STYLE>
.LinearGradient {
   background: yellow;
   background: -webkit-linear-gradient(10deg, yellow, #40FF00, blue);
   background: -o-linear-gradient(10deg, yellow, #40FF00, blue);
   background: -moz-linear-gradient(10deg, yellow, #40FF00, blue);
   background: linear-gradient(10deg, yellow, #40FF00, blue);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with yellow to green to blue color gradient in a 10 degree angle</DIV>

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):

Text on background with yellow to green to blue color gradient in a 10 degree angle



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:

<STYLE>
.LinearGradient {
   background: yellow;
   background: -webkit-linear-gradient(10deg, yellow 40%, #40FF00,blue);
   background: -o-linear-gradient(10deg, yellow 40%, #40FF00, blue);
   background: -moz-linear-gradient(10deg 40%, yellow, #40FF00, blue);
   background: linear-gradient(10deg, yellow 40%, #40FF00, blue);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with yellow (40 %) to green to blue color gradient in a 10 degree angle</DIV>

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

Text on background with yellow (40 %) to green to blue color gradient in a 10 degree angle


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:

<STYLE>
.LinearGradient {
   background: #40FF00;
   background: -webkit-repeating-linear-gradient(left, #40FF00, #2E64FE 20%);
   background: -o-repeating-linear-gradient(right, #40FF00, #2E64FE 20%);
   background: -moz-repeating-linear-gradient(right, #40FF00, #2E64FE 20%);
   background: repeating-linear-gradient(to right, #40FF00, #2E64FE 20%);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with repeating green to blue color gradient</DIV>

On the screen, it looks like this:

Text on background with repeating green to blue color gradient


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.

<STYLE>
.LinearGradient {
   background: #40FF00;
   background: -webkit-repeating-linear-gradient(left, #40FF00, #2E64FE 100px, #40FF00 110px);
   background: -o-repeating-linear-gradient(right, #40FF00, #2E64FE 100px, #40FF00 110px);
   background: -moz-repeating-linear-gradient(right, #40FF00, #2E64FE 100px, #40FF00 110px);
   background: repeating-linear-gradient(to right, #40FF00, #2E64FE 100px, #40FF00 110px);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with repeating green to blue to green color gradient</DIV>

On the screen, it looks like this:

Text on background with repeating green to blue to green color gradient


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


Radial color gradients

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:

<STYLE>
.RadialGradient {
   background: yellow;
   background: -webkit-radial-gradient(yellow, #40FF00);
   background: -o-radial-gradient(yellow, #40FF00);
   background: -moz-radial-gradient(yellow, #40FF00);
   background: radial-gradient(yellow, #40FF00);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with a yellow to green radial color gradient</DIV>

On the screen it looks like this:

Text on background with a yellow to green radial color gradient



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:

<STYLE>
.RadialGradient {
   background: yellow;
   background: -webkit-radial-gradient(circle, yellow 40%, #40FF00);
   background: -o-radial-gradient(circle, yellow 40%, #40FF00);
   background: -moz-radial-gradient(circle, yellow 40%, #40FF00);
   background: radial-gradient(circle, yellow 40%, #40FF00);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with yellow (40 %) to green circular color gradient</DIV>

and on the screen it looks like this:

Text on background with yellow (40 %) to green circular color gradient



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:

<STYLE>
.RadialGradient {
   background: yellow;
   background: -webkit-radial-gradient(50% 10%, yellow, #40FF00);
   background: -o-radial-gradient(50% 10%, yellow, #40FF00);
   background: -moz-radial-gradient(50% 10%, yellow, #40FF00);
   background: radial-gradient(50% 10%, yellow, #40FF00);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on a background with a flattened yellow to green radial color gradient</DIV>

On screen, it looks like this:

Text on a background with a flattened yellow to green radial color gradient



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:
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.

<STYLE>
.RadialGradient {
   background: #40FF00;
   background: -webkit-radial-gradient(50px 50px, closest-side, #40FF00, #2E64FE 200px);
   background: -o-radial-gradient(50px 50px, closest-side, #40FF00, #2E64FE 200px);
   background: -moz-radial-gradient(50px 50px, closest-side, #40FF00, #2E64FE 200px);
   background: radial-gradient(closest-side at 50px 50px, #40FF00, #2E64FE 200px);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on a background with an off-center green to yellow radial color gradient</DIV>

On the screen, it looks like this:

Text on a background with an off-center green to yellow radial color gradient



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:

<STYLE>
.RadialGradient {
   background: #40FF00;
   background: -webkit-repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
   background: -o-repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
   background: -moz-repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
   background: repeating-radial-gradient(#40FF00, #2E64FE 100px, #40FF00 110px);
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on background with green to blue to green cyclic, radial color gradient</DIV>

On the screen, it looks like this:

Text on background with green to blue to green cyclic, radial color gradient


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.





Transparency/opacity

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:

<DIV STYLE="background-color:#FFFFFF; opacity:0.5; filter:alpha(opacity=30)">Text on white background using opacity and filter</DIV>

<DIV STYLE="background-color:rgba(255,255,255,0.5)">Text on white background using rgba</DIV>

On the screen, it looks like this:

Text on white background using opacity and filter

Text on white background using rgba



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:

<STYLE>
.OpacityGradient {
   background: #FFFFFF;
   background: -webkit-linear-gradient(left, rgba(255,255,255,0), rgba(255,255,255,1));
   background: -o-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1));
   background: -moz-linear-gradient(right, rgba(255,255,255,0),rgba(255,255,255,1));
   background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
}
</STYLE>

<DIV CLASS="OpacityGradient">Text on clear to white background using an opacity gradient</DIV>

On the screen, it looks like this:

Text on clear to white background using an opacity gradient


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

Text on clear to white background, with a 75% displacement of the opacity gradient


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

Text on clear to red to white background using opacity gradient


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