Aug 10
21
css 3 Gradient Tutorial Part 1 Linear Gradient
This will be my first tutorial on css (cascading style sheet) 3 which offers new features over css 2. In this tutorial I will cover how to implement gradients onto elements without the need of images. At the time of this article only Safari, Chrome and Firefox (I tested it on 3.6.8) . IE has a way to do gradients with filters by since this is not css 3, I will not include it here.
In part 1 I will explain how the linear gradient works. The next part will cover the radial gradient.
Webkit
Syntax
-webkit-gradient(<type>, <point>, <point>, <colour>, <colour> [, <colour>]);
Explanation
Type can either be linear or radial. For this article I will be using linear.
Point is a pair of values (x y). These can either be percentages or words. Valid words are left, right, top, bottom and center. The gradient will be applied to the line from the start point to the end point. A point of 0% 50% is equivalent to left center and so on.
Each colour is a function taking in 2 parameters, the stop value and the colour. The stop value can either be a percentage or a number between 0.0 and 1.0. This will indicate where along the line the colour will be placed. A value of 0.0 or 0% will place the colour at the beginning of the line while a value of 75% or 0.75 will place the colour near to the end point. The colour can either be a hexadecimal representation of the colour or the rgb function. E.g. #009900 or rgb(0, 100, 0).
Gecko/Mozilla
Syntax
-moz-linear-gradient([<position>] [<angle>], <colour>, <colour> [, <colour>]);
Explanation
Position represents the starting point of our linear line. Can be expressed as a word (left, right, top, bottom, center), pixels or a percentage. There is no need to specify both the vertical component or the horizontal component. If either component is omitted, then the value of center is used for that direction. So if we only specify left, then center will be used for the vertical component.
Direction refers to which direction the linear line will move from our starting position. The default is 0deg which means the line will move to the right. A value of 90deg will give us a vertical gradient. We can also specify directions such as 45 degrees for diagonal gradients.
Colours are represented as a pair of values with the first value representing the colour and the second representing where along our gradient line this colour will be places. The allowed values here are the same as for the webkit syntax.
Examples
Simple gradient from blue to red from left to right
.gradient {
background: -webkit-gradient(linear, left center, right center, color-stop(0.0, rgb(0, 0, 255)), color-stop(1.0, #ff0000));
background: -moz-linear-gradient(left center 0deg, #0000ff 0%, rgb(255, 0, 0) 100%);
}
Gradient from blue to green to red from top to bottom
.gradient {
background: -webkit-gradient(linear, center top, center bottom, color-stop(0.0, rgb(0, 0, 255)), color-stop(0.5, #00ff00), color-stop(1.0, rgb(255, 0, 0)));
background: -moz-linear-gradient(top , #0000ff 0%, #00ff00 50%, #ff0000 100%);
}
Gradient from green to red at an angle
.gradient {
background: -webkit-gradient(linear, left bottom, right top, color-stop(0.0, rgb(0, 255, 0)), color-stop(1.0, rgb(255, 0, 0)));
background: -moz-linear-gradient(left bottom 45deg, #00ff00 0%, #ff0000 100%);
}
