Working With Gradients in CSS3
CSS3 is enabling us to ditch our photo editors in favor of its pure goodness. We can now give our elements the most subtle of gradients, and give our pages that extra spark that used to require the help of programs like Photoshop. Even better, CSS gradients can be used cross-browser without any headaches. Today, we’ll see how each browser implements the gradient property, and create a rather stylish looking rectangle.
The HTML is pretty standard, and contains a simple Div element inside of the body. We’ve given the Div a class called “gradient” that will allow us to target this Div with CSS.
Have a look at the HTML page:
Note that I’ve only included the body section; the rest of the HTML source code can be found in the downloadable folder for this tutorial.
Simple enough right? We’ll be targeting this div with CSS in the following section.
Our CSS will target the “gradient” Div and assign the gradient property to it, making sure to include all of the major browser’s implementation of the gradient property.
Since each vendor has its own specification, we’ll go ahead and step through each style one by one.
Take a look at what the full CSS declaration will look like, and then we’ll come back for an explanation.
background: -webkit-gradient(linear,left top,right bottom,from(#264aff),to(#FFFFFF));
background: -moz-linear-gradient(top, #264aff, #FFFFFF);
filter: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#264aff', endColorstr='#FFFFFF');
border: 1px solid;
First, in the CSS is the webkit-gradient declaration. Notice that the webkit version is implemented as a value of the background property. The webkit-gradient declaration needs a bit of information to do its’ job; namely, the type of gradient (linear), the starting position of the gradient (left top), the ending position (right bottom), and the 2 colors from which to build the gradient (#264aff, #FFFFFF).
The second background declaration, the Mozilla version, is very similar to the webkit version, however it only asks for a starting point and 2 colors. Microsoft’s implementation is a bit more convoluted, but still accomplishes the same effect. It uses a Direct X class to call the gradient into the page, and it simply asks for the 2 colors to transition between.
As you can see, it takes very few lines of code to create a nice looking gradient effect on our page. Normally, this would be used to create buttons, badges and things of that nature. For simplicity sake, we used a div element today. It’s highly recommended that you mess around with the gradients, and look around the net to see examples of how they are being used. This is a very popular feature of CSS3, and you’ll be sure to see more of it used as the standard continues to grow.