Jul 01

Linear CSS Gradients that ANY Browser Can See

Thu, 07/01/2010 - 17:33 — julie

In the past, if you wanted to have an HTML entity to have a gradient background you created in image of a gradient and displayed it in the entity using the background-image attribute in CSS. With the evolution of browsers and CSS/HTML, this is no longer the case. In this tutorial we will learn how to use CSS to add a linear gradient to the background of entities.

The Setup

First, we need to decide how we are going to use the gradient. I suggest using the gradient as an enhancement. Keep in mind that some browsers will not display the gradient well or at all. So you will want it to degrade gracefully. If the browser doesn’t display the gradient the design should still be excellent and not require the gradient in order to function.

Gradients can be applied to block elements such as DIV tags. We will be using a simple DIV tag in this example.

A simple class will be set up to build the DIV we will display the gradient in. The DIV will be 300px wide by 200px tall. Here is the CSS to build the DIV.
.sample-box {
border:1px solid #999;
width:300px;
height:200px;
padding:5px;
color:#ccc;}

Rendering a box as follows:

Cool Gradient Goes here

Applying the Gradient

The Excellent – webkit

Now, let’s add our gradient. We will start by looking at the webkit method. Using browser specific CSS isn’t the best solution since it only covers a single rendering engine. However, as you will see, the major rendering engines offer the ability to render CSS gradients in their own way.

Webkit, namely Safari and Chrome, use the following CSS to render a linear gradient.
-webkit-gradient(type,start point, endpoint, from(start color), to(end color)
Type is either radial or linear. For this example we will be using linear. Point is a paired, comma separated value that gives a start point and finish point to the linear gradient. For our first example we will be creating a simple dark blue to light blue linear gradient that starts at the top and moves to the bottom. Here is the CSS we will use:
.gradient {-webkit-gradient(linear, left top, left bottom, from(#354bb8), to(#1a3366));}
For the HTML to display the DIV use the following code:

Cool Gradient applied


Now, viewing this in your webkit browser will render a box that looks like the following screen shot.
CSS gradient in Safari
Excellent! Now we have a fully functioning gradient. However, this is only visible in webkit. We now need to create CSS to display this gradient in other rendering engines.

The good

Firefox uses the Gecko rendering engine. The CSS is simple and follows this general format:
-moz-linear-gradient(start location, start color, end color)
The start location in this case is top, right, bottom or left. The start and end colors are typically the hexadecimal values of your colors. The CSS needed for displaying gradients is as follows:
background: -moz-linear-gradient(top, #354bb8, #1a3366);
The code renders the following screen shot in FireFox 3.6.
Firefox gradient CSS rendering
This gives us great results as well.

The Tolerable

Internet Explorer is the bane of web standards as most of us know. But, believe it or not IE 7 & 8 CAN render a gradient without an image. Now this isn’t true CSS. This takes a filter call within the CSS. Here is the code:
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#354bb8', endColorstr='#1a3366');
That is all you need! Here is what Internet Explorer 8 renders with that code.
CSS gradient in IE 8
Now you know how to add a gradient to an entity. There are other advanced features such as radial gradients and stop points that can be added to enhance gradients. These are more difficult to get to be visible across all browsers. For a great online gradient CSS maker that will give you the code needed for Mozilla and Webkit head on over to the Western Civ CSS maker app. You can find the CSS and HTML for this tutorial here.

Copyright 2009. E-mail Me
Auto Spare Parts