Dynamic50 Web Design and Development, Ruby on Rails Specialists in London and Oxford, UK

With the recent launch of Firefox 3.6, Firefox finally got support for CSS3 gradients (albeit vendor-specific). Safari (and other webkit based browsers) have had support for CSS gradients for a wee while now, and I will hopefully post about those in more detail in the near future. Today though is going to be exploring the -moz-linear-gradient value. Radial gradients will have to wait for another day, once I can get my head around them : )

The advantage of using CSS gradients rather than a tiled image is flexibility and speed. Not needing to load up images can speed up your website performance by reducing both the data needed for a page and more importantly, http requests. The flexibility comes from the fact that to change a gradient, you need only to change some colour values and/or positions, so no more firing up Photoshop just to change a gradient that starts from black to not-quite-as-black. In addition, using CSS gradients lets you draw gradients that span the full width or height of an element, no matter the size- something that can’t quite so easily with a background image.

Usage

The -moz-linear-gradient value can be used where background-image value is used. So for example, instead of using…

background-image: url(path/to/image.png);

you would use instead (taken from Mozilla Documentation)

background-image: -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* );

In English, this means you need to provide it with…

• - a starting point or gradient angle (optional)
• - a minimum or 2 colour positions

points and angles

Inclusion of a point and/or angle is optional. If you do not specify one as the first parameter, the gradient will be assumed to go from top to bottom. If you do chose to specify this parameter, you can provide

• - A single point
• - A single angle
• - A point and angle combination

A <point> is the standard way of defining an x and y position in CSS i.e. keyword values such as “left”, “top”, “center” etc.; percentage values or other valid value unit. If you provide only one value, the other is assumed to to “center”.

The value of the <angle> can be specified in degrees (deg), gradians(grad) or radians(rad). Unlike the webkit implementation of CSS gradients, there is no way of defining the end point of the gradient. Instead, the end point is determined by what values you provide.

<point>

In the case that you provide only a <point> value, the end point is determined to be the point you would get if you rotated the starting point 180 degrees around the centre of the element being styled. It is much easier to see what is happening in an image, so here is an animation showing the process of creating a gradient with a <point> value of center top, fading from black to white.

The resulting element (Firefox 3.6+ users only):

And just for clarity, here is another example, this time using a <point> value of 35% 60%

And its resulting element:

<angle>

Determining what actually happens when you provide an angle is quite intuitive, but rather difficult to explain. The Mozilla Developer Documentation description of the process at first glance is pretty confusing, but does convey the right information. It is helpful however, to know that the angles are measured from the x-axis, with positive angles measured anti-clockwise.

The short description is that it works, pretty much, just like the Gradient Overlay layer effect in Photoshop. The long description is something like this (assuming a specified angle of 150deg)…

The starting point is placed at one of the element corners (left top; right top; left bottom or right bottom).

The corner used depends on the angle provided. The correct corner is the one that allows the specified angle to point into the element.

To determine the ending point, you would need to imagine 2 others thing. First is to imagine a line drawn from your start point, along the specified angle (this is known as the axis).

The second is to imagine a line drawn from the opposite corner, which is perpendicular to the axis.

The ending point would be where these 2 lines meet.

And for sake of completenes, here is the full animation

And the resulting element:

point angle combo

Providing both a <point> and an <angle> works as you would expect. The start point is taken as the point you provide, and the angle is then drawn as shown above.

<stop>

The <stop> value describes 2 things: a colour and the position along the axis at which the colour should appear. As such, a <stop> takes 2 values: a colour value and an optional length value, separated by a space. A gradient will be created from one stop to the next, blending the colour (and even opacity) as needed. Some valid examples would be…

#fff
#999 50%
#a909f2 80px
rgba(255,255,255,0.5) 6em

You are required to provide at least 2 stop values, one for the start and one for the end of the gradient. If the first stop value has no position, it is assumed to be 0. If the last stop value has no position, it is assumed to be 100%. For any other <stop> values without positions, it is assumed to be half way between the previous and next <stop> values. Adding additional <stop> values is as easy as chaining them together, separated with a comma (,).

Piecing all these bits together (along with some other css3 bits) we can create some subtle but nice effects such as a glass effect button (Firefox 3.6+ only!).
Button

The gradient part of the styling is like so…

a#example{
  background-color: #000;
  background-image: -moz-linear-gradient(
    center top,
    rgba(255, 255, 255, 0.5) 0pt,
    rgba(255, 255, 255, 0.33) 50%,
    rgba(255, 255, 255, 0) 50%,
    rgba(255, 255, 255, 0.2) 100%);
}