CSS3 Gradients

Given the web’s love of gradient backgrounds, it’s surprising that it took CSS so long to include this feature. Unfortunately, you still have to write specific rules for each browser group, and if you want to support dinosaurs like IE7, you’ll have to provide some kind of fallback. If it’s up to me, I’ll just give IE a flat background that offers enough of a contrast to make the text legible.

Here’s a straight-forward example of the latter, using a simple linear background that goes from white to gray, top to bottom.

.blueBox {

  /* old browsers */
  background: #ebebeb;

  background: -moz-linear-gradient(top, #fff 0%, #999 100%);
  /* FF3.6+ */

  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ebebeb), color-stop(100%, #e3e3e3));
  /* Chrome,Safari4+ */

  background: -webkit-linear-gradient(top, #ebebeb 0%, stop 100%);
  /* Chrome10+,Safari5.1+ */

  background: -o-linear-gradient(top, #ebebeb 0%, #e3e3e3 100%);
  /* Opera 11.10+ */

  background: -ms-linear-gradient(top, #ebebeb 0%, #e3e3e3 100%);
  /* IE10+ */

  background: linear-gradient(top, #ebebeb 0%, #e3e3e3 100%);
  /* W3C */
}

Like I said, it’s a pain to write out each rule separately, but as you can see, they’re all basically the same. The older webkit browser make you specify the X and Y starting point, but for the rest it’s just the Y. The percentages allow you to specify where the gradient starts, so it doesn’t have to span the entire element. You could specify:


background: -moz-linear-gradient(top, #fff 50%, #999 100%);
/* FF3.6+ */

And the gradient would begin half way down the element; the same goes for the ending point. You can also define multiple stops.


/* Sunburst effect */
background: -moz-linear-gradient(top, #FF6103 0%, #FFCC11 33%, #FF6103 66%, #FF6103 100%);
/* FF3.6+ */

You can also define your gradient as “radial”, if you’d like a circular gradient.


background: -moz-radial-gradient(top, #cff 0%, #069 100%);
/* FF3.6+ */

For more on radial gradients, check out:
http://www.the-art-of-web.com/css/radial-gradients/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

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