This site is dedicated to all things I see and that I think are interesting to publish almost always are other very smart people.

CSS3 Linear Gradients

Author: Dynamic Drive

With the advent of CSS3’s comes support for gradients, specifically, linear and radial gradients. CSS Gradients is supported in FF3.6+, Safari 2+ and Google Chrome. In FF3.6, gradients can currently only be applied to an element’s “background-image” or shorthand “background” properties.

The syntax for CSS3 Linear Gradients differs slightly between the Firefox and Safari/Chrome version. They are:

-moz-linear-gradient(<point> || <angle>, color-stops) /*Firefox Linear gradients*/

And:

-webkit-gradient(linear, <point>, color-stops) /*Safari, Chrome Linear gradients*/

Whereby:

  • Point or angle: This is used to define the starting point of the gradient. The value can be a percentage (%), in pixels, or “left“, “center“, or “right” for horizontal and “top“, “center“, or “bottom” for vertical positioning. If a horizontal or vertical position is not specified, the value defaults to “center“, or 50%. In Firefox, angle values are also accepted, such as 45deg.
  • color-stops: Colors in which the gradient should transition to and from. If more than two colors are specified with no explicit stop value for each color, the gradient will transition from one to the next evenly until the final stopping color.
    • In FF, each color stop follows the syntax: <color> [ <percentage><length> ].  If a percentage (0 to 100%) or length value (0 to 1.0) is defined following the color name, the previous color will fade to that stop color at that stop point. If no value is present, the color will be fade out gradually from the start color to the end color.
    • In Safar, each color stop follows the syntax:  color-stop(value, color). Stop value  is either a percentage (0 to 100%) or length value (0 to 1.0), or from(color) and to(color). The later two are shorthand functions equivalent to color-stop(0, color) and color-stop(1.0, color) respectively.

The big difference between FF and Safari is that FF uses a “point and angle” system while Safari uses a “point to point” system in applying the gradient.

Color-Stop Explained
A color-stop sets the color in which the gradient’s previous color should fade into and at a given point. The point if defined dictates when the color should finally change to the stop color itself. For example, the color-stop value “blue 30%” in Mozilla  or “color-stop(30%, blue)” in Safari means the gradient should fade from the previous color gradually into blue before finally resting at blue itself at the point 30% of the width’s container.

Examples are the best way to learn, so lets see a bunch of them now (IE and older browsers will see a gradient image instead):

1) Left to Right Gradient

background: -moz-linear-gradient(left, #00abeb, #fff);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));

2) Right to Left Gradient

background: -moz-linear-gradient(right, #00abeb, #fff);
background: -webkit-gradient(linear, right center, left center, from(#00abeb), to(#fff));

3) Top to Bottom Gradient

background: -moz-linear-gradient(top, #00abeb, #fff);
background: -webkit-gradient(linear, center top, center bottom, from(#00abeb), to(#fff));

4) Bottom to Top Gradient

background: -moz-linear-gradient(bottom, #00abeb, #fff);
background: -webkit-gradient(linear, center bottom, center top, from(#00abeb), to(#fff));

5) Upper-Left to Lower-Right Gradient

background: -moz-linear-gradient(left top 315deg, #00abeb, #fff);
background: -webkit-gradient(linear, left top, right bottom, from(#00abeb), to(#fff));

6) Upper-Right to Lower-Left Gradient

background: -moz-linear-gradient(right top 225deg, #00abeb, #fff);
background: -webkit-gradient(linear, right top, left bottom, from(#00abeb), to(#fff));

7) Left to Right Stopping Short Gradient

Blue runs from 0 thru 45% of DIV. Remainder is White Gradient.

background: -moz-linear-gradient(left, #00abeb, #fff 45%);
background: -webkit-gradient(linear, left center, right center, from(#00abeb), color-stop(45%, #fff));

8) Upper-Left to Lower-Right Sunshine Gradient

Orange runs from 0 thru 30% of DIV. Yellow from 30% to 40%. Remainder is White Gradient.

background: -moz-linear-gradient(left top 315deg, orange, yellow 30%, white 40%);
background: -webkit-gradient(linear, left top, right bottom, from(orange), color-stop(30%, yellow), color-stop(40%, white));

9) Top to Bottom Plateau Gradient.

Fades evenly from Light Blue to Medium Blue to Dark Blue, then Medium Blue and finally Light Blue.

background: -moz-linear-gradient(center top, #b8d8f2, #92bde0 25%, #3282c2 50%, #92bde0 75%, #b8d8f2);
background: -webkit-gradient(linear, center top, center bottom, from(#b8d8f2), color-stop(25%, #92bde0), color-stop(50%, #3282c2), color-stop(75%, #92bde0), to(#b8d8f2));

10) Left to Right Rainbow Gradient

Fades evenly between the 7 colors of the rainbow.

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);
background: -webkit-gradient(linear, left center, right center, from(red), color-stop(14%, orange), color-stop(28%, yellow), color-stop(42%, green), color-stop(56%, blue), color-stop(70%, indigo), to(violet));

Integrating CSS3 gradients with your existing pages

Just because CSS3 gradients isn’t yet widely supported doesn’t mean you can’t start taking advantage of it now. By first declaring a regular image gradient followed by CSS3 gradients, browsers that don’t support CSS gradients will default to the image while those that do will use the more efficient CSS version:

.gradient{
background: url(gradient.gif) top left repeat-y; /*fall back gradient image*/
background: -moz-linear-gradient(left, #00abeb, #fff) ;
background: -webkit-gradient(linear, left center, right center, from(#00abeb), to(#fff));
}

In FF3.6+, Safari and Chrome, the CSS gradients mean 10 less HTTP requests each time this page is loaded in those browsers, translating into faster page rendering for those users. All of the examples above in fact use this technique so all browsers can see a gradient effect.


Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s