Monthly Archives: April 2011

Gradient Columns

The CSS3 gradient background can be used to create solid columns of color. This can be used to solve the problem of the different colors not extending to the bottom when the columns are of different heights. If you put a background color on each column, the shorter column’s color only extends to the bottom of it’s container (see first example in demo.) If you use a gradient background on the container of both columns, you will not need to worry about varying heights (see second example in demo.)

See the Pen Gradient Columns by Lisa (@lisa_c) on CodePen.

See the Pen Gradient Columns by Lisa (@lisa_c) on CodePen.

See the Pen Gradient Columns by Lisa (@lisa_c) on CodePen.

Explanation

The first line of code on .container2 is a fall back for browsers that don’t support gradients. See Internet Explorer section below for more explanation.

You can add color stops to your gradients by saying where the colors end. You can specify this place using percentages or by giving a length in pixels. The trick to getting solid colors with a gradient background is to specify a color stop of the first color at the same spot as the next color’s stop.

background-image: linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);

Notice how they are both at 60%. So the first color goes from 0-60%, and the second color goes from 60% to 100% because the color value of both are the same. It is not a true “gradient” where the color changes from one color to another.

Internet Explorer

This trick does not work on IE9 and below.

The solution for making this work in IE is to use one of the old ways of handling multiple columns of different backgrounds. There are several solutions, but I have always used a background image. If you create a small background image slice to be used on the container of the columns, as shown below, you can repeat it along the y-axis.
background: #color url(bg.jpg) repeat-y;

However, this solution does not work for fluid layouts, which the example I am providing above is. Your image is a fixed width and so this works on fixed width layout only. If you want to serve up a different page for early IE that will work for you.

Personally, I would just use one background color for old IE or allow the columns to not be the same height. I think either solution is acceptable for a small percentage of users.

Gradients

You can display Gradients with CSS3 and the background-image property. Instead of specifying an image, you specify the gradient and the colors you want. The gradients can be quite complicated with multiple colors, but I will stick to 2 colors today. You can also use a radial gradients, which I will cover in the future.

  background-color: #77CC11;
  background-image: -moz-linear-gradient(top, #8aec14, #528d0c); 
  background-image: 
          -webkit-gradient(linear, left top, left bottom, from(#8aec14), to(#528d0c)); 
  background-image: -webkit-linear-gradient(top, #8aec14, #528d0c); 
  background-image: -o-linear-gradient(top, #8aec14, #528d0c);
  background-image: linear-gradient(top, #8aec14, #528d0c);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#8aec14', 
                                                     EndColorStr='#528d0c');

Explanation

The first thing you want to specify is a background color for fall back in case the gradient doesn’t work, or the user is on a browser that doesn’t support the property. I chose a color that falls in the middle of the my starting color and ending color.

The reason there are two webkit lines, is that until a few months ago, webkit had it’s own syntax from gradients which was significantly different than the mozilla version. Thankfully, they decided to switch to the format that others are using, so now the only difference is the prefix. The newer version is simpler and easier to remember, also. If you want to be sure your gradients will work in older versions of Safari and Chrome you can use the second line. In time though, because most users of those browsers update fairly quickly, you can probably safely skip it.

Properties

The first property is the starting point of the gradient. You can specify a side (left, right, top, bottom) or a corner (i.e. top right, etc.) The second property is the starting color, and the third property is the ending color. If you don’t specify any other stops, the gradient will be a gradual steady gradient from starting color to ending color.

Horizontal Example

Here is an example of a Left to Right gradient. The code is exactly the same as in the snippet above, except you chance the word “top” to “left”. (The early webkit version will use “left top, right bottom”.)

The filter property for IE, only works from top down, so if you really want a horizontal gradient, you will need to use an image. Just specify that first before the gradient code in your CSS. If you do that, other browsers that do support gradients will skip downloading the image, so there is no harm in having it for IE.

Internet Explorer

There are a few techniques you can use to get gradients in IE, which still does not support gradients on the background-image, even in IE9. The simplest, if you want a top to bottom gradient is to use “filter” with the syntax I specified above. You can also use CSS3PIE.

-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);