Part 3.4Color, backgrounds, opacity and gradients

This article is all about using colour-based properties in CSS.

Color

An element may have some text that should be a different colour. The following is an example of this:

Colours can be given to elements using quite a few properties and in order to give an element's text colouring, the CSS color property is given a value.

.red-color{
	color: red;
}
	                      			

Colour in CSS works through many different ways. Colors can be represented as text from a list of predefined colours as shown in the previous example. They can also be defined using hexadecimal (base 16 counting). Here is a table with a few predefined colours and the hexadecimal representation of them:

Because computers can generate 2⁶⁴ or 24-bit colours (or 32-bit where the additional 8 bits are for the alpha or transparency channel), 16,777,216 colours can be represented by computers.

These are made of the three primary colours of the magnetic spectrum; red, green and blue. These are often known as RGB.

Below is the magnetic spectrum generated through a CSS gradient (if it is not visibile then it is probably because of an outdated browser).

As RGB is used on computers, there are 255 different individual shades for each colour component, i.e. there are 255 shades of red, 255 shades of blue and 255 shades of green. As well as each of these shades there is an off value, 0. These shades can be mixed to make individual colours and in turn there are 256 x 256 x 256 colours, making 16,777,216 colours.

RGB works in base 10. This means that the first number is 0 and the last is 9. Hexadecimal works in base 16. This means that the first number is 0 and the last number is 15, except, it works with letters instead of numbers after 9.

Here are some very simple conversions between RGB and hexadecimal:

Hexadecimal is a complex system in comparison to writing the name of the colour, but there are plenty of tutorials on the web on it. It is however incredibly useful as it reduces the amount of typing required as the following code sample demonstrates:

.hex_box{
	color: #f0f
}
.rgb_box{
	color: rgb(255,0,255);
}
	                      			

<div class="hex_box">Hex box</div>
<div class="rgb_box">RGB box</div>
	                      			

Here is an example of the HTML with the above CSS as the stylesheet.

Backgrounds

CSS also permits the use of colours on the background property.

A background is defined the same way as text colouring and it can be given any kind of colour value type.

.background_box{
	background: #f00
}
	                      			

Here is the above example in action:

The background property also permits images to be used instead of colours. Images should be specified from a URL as shown below:

.background_box{
	background: url('http://www.jamiebalfour.scot/myimage.jpg');
}
	                      			

Alpha (transparency) can also be added to colours, but it must be done in a specific way that means that it cannot be done with hexadecimal. Using RGBA, the following kinds of effects can easily be achieved:

With hexadecimal, this effect cannot be achieved, as the opacity property has to be specified, which affects the entire element.

As well as setting the image, the following other properties can be set from the background property:

Alternatively, each of these sub-properties could be combined with the background as properties on their own. As an alternative to the background property, the CSS background-image property can be used. It's usage is exactly the same, the only difference is that it means that multiple backgrounds can be specified. So if the background only stretches 30% of the height of an element, the background colour can take the rest of the place of the background.

Opacity

As mentioned in the previous section, opacity can be used to define colour transparency. Elements can be given full transparency across themselves and all sub-elements using this property:

.transparency{
	opacity: 0.8;
}
	                      			

The value of 0.8 specifies that it is 80% opaque. If it was given 0.2, this would be 20% opaque or 80% transparent.

Gradients

Gradients in CSS are a new feature. They are used to make colours stretch from one colour to another gradually. With CSS, multiple colours can be specified and the browser will generate a gradient that passes through each of those colours in the order that is specified.

Gradients can be used instead of a colour in most places including, but not limited to, background, color and border.

Prior to the CSS3 draft specification that includes the specification for linear gradients, websites relied heavily on using images for gradients. These pre-generated images meant that when a user were to zoom, they would notice compression or the gradient simply would not stretch the user's full display. With the CSS gradient properties and support, these problems are now a thing of the past.

The syntax for a CSS gradient is:

background: linear-gradient(direction, colour1, colour2, ..., colourN);
                      			

In this example, there are N colours, as the gradient can accept an infinite number of colour arguments. Also, in this example the gradient is being applied to the background property.

The direction parameter is used to specify which point the gradient is coming from, for instance if it is given top it will come from the top.

Direction can be one of four properties:

The following example shows a gradient that comes from left to right going from red to green to blue:

.linear-grad{
	background: linear-gradient(to right, red, green, blue);
}
                      			

The property list does not give an option for a diagonal gradient (nor radial gradients). To create a diagonal gradient, the direction property can be replaced with the angle property. Instead of giving a direction, an angle can be specified instead.

A gradient that is going to the top right corner will have an angle of 45 degrees. The following sample demonstrates this:

.diag-grad{
	background: linear-gradient(45deg, red, green, orange);
}
                      			

CSS also defines points where a gradient will create a colour stop and start on the next colour. Taking the previous example with red, green and blue, the following gradient puts stops on. Blue here is the most obvious colour because it given 70% of the gradient space:

The code for this is shown below:

.points{
	background: linear-gradient(to right, red, green 30%, blue 70%);
}
                      			

As well as giving the option for what are known as linear gradients, CSS gives the option of radial gradients. An example of one of these gradients is shown below:

Radial gradients can be defined in the same way, except they do not specify a direction or angle parameter.

This example creates a HAL 9000 like spherical object with a border-radius, border and radial gradient:

#hal9000{
	background: radial-gradient(orange, red, #a00, black 50%);
	border-radius: 50%;
	border: 8px #ccc solid;
}