Jamie Balfour

Welcome to my personal website.

Find out more about me, my personal projects, reviews, courses and much more here.

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:

Let's party!

On the 25th of November this year I will be celebrating my promotion at work!

Since my manager will be resigning with immediate effect, I am being promoted as early as next week.

So come on! Let's party and have a really good time!

Yours, Emma Lovelace

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.

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

Colour value Colour sample Hexadecimal colour
red #ff0000
blue #0000ff
lime #00ff00
black #000000
white #ffffff
yellow #ffff00
magenta #ff00ff
cyan #00ffff
orange #ffa500

Because computers can generate 264 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:

RGB Hexadecimal
255 FF
0 0
10 A
32 20
99 63

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:

CSS
.hex_box{
	color: #f0f
}
.rgb_box{
	color: rgb(255,0,255);
}
	                      			
HTML
<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.

Hex box
RGB box

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.

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

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

Loch Tummel

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

Loch Tummel

This effect of using outer transparency using rgba(r,g,b,alpha) is particularly useful when making a semi-transparent frame, as the previous image shows. It cannot be achieved using hexadecimal colouring.

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

Sub-property name Purpose
background-position The positioning of the background image
background-size CSS 3 only. The size of the background image
background-repeat Specifies whether to repeat the background image
background-origin CSS 3 only. Specifies which object the background should position to
background-attachment Specfies whether the image should scroll with the page

When a background-size property is specified, the background-position property must be seperated from it using a forward slash. For example background: url('img.jpg') center/100%;

This example gives a background that is centered and given 100% size.

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:

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

CSS gradients are only supported in CSS3 and later. They do not work with Internet Explorer 9 or earlier. There are fixes that allow gradients to be used in these browsers, but these are unofficial.

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:

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

CSS gradients might need prefixed for older browser support.

Direction can be one of four properties:

Property Purpose
Left Comes from the left
Right Comes from the right
Top Comes from the top
Bottom Comes from the bottom

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

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

Angles are specified using the deg unit such as 180deg.

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

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

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

CSS
#hal9000{
	background: radial-gradient(orange, red, #a00, black 50%);
	border-radius: 50%;
	border: 8px #ccc solid;
}
Feedback 👍
Comments are sent via email to me.