CSS3 Images End-Game: Gradient Changes

CSS3 Gradients are a huge bonus to cutting edge browsers. They help eliminate the need for image editing programs for elements like buttons. If you are having trouble developing a gradient, look at this online css3 gradient generator.


background: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue)); 

  • What type of gradient? (linear)
  • X and Y axis coordinates of where to begin. (0 0 – or left-top corner)
  • X and Y axis coordinates of where to conclude (0 100% – or left-bottom corner)
  • What color to begin with? (from(red))
  • What color to conclude with? (to(blue))

Below is a summary of the major changes to CSS gradients over the past year:

Angles in linear-gradient() changed from polar angles to bearing angles (compass directions). 0° now points up (bottom-to-top), and angles increase clockwise. See Angles in Gradients for the feedback that informed this decision.

Keyword directions in linear-gradient() changed from bare directional keywords (top, right, bottom, left) indicating the starting point to to ‹keyword› where the keyword indicates the endpoint. (to bottom, to left, to bottom, to left). This change was made because Tab felt having 0deg mean bottom-to-top made the fact that top meant top-to-bottom confusing. The WG was split but mostly ambivalent on whether this was necessary, or whether from ‹keyword› was a better alternative; the resolution landed on to ‹keyword›.

Corner-to-corner linear-gradient() has been redefined so that instead of aligning the gradient line to the diagonal, the central color occupies the other diagonal. See Behnam Esfabad’s post for a demonstration showing the old and new (“magic”) versions.

Syntax of radial-gradient() has been changed to (roughly) radial-gradient( [ ‹size› || ‹shape› ] [ at ‹position› ]?, ‹color-stop-list› ): specifically, the shape/size and position parameters are collapsed into the first argument using CSS property value conventions, allowing either or both to be specified. Position is distinguished from size by the preceding at keyword. See Radial Gradient Readability for some of the thinking that went into this change.

You can read the full article here – http://www.css3.info/css3-images-pre-lc/

A lot of people follow along the lines of:

I strongly recommend against these! They do not act the same, are limited, hurt performance, and can cause layout issues. Simply put, since IE does not support gradients (and many other CSS features natively, without filter), either use images for the same effect (background image) or convince your client that IE users get less of an experience (who seriously cares about gradients vs single colours besides insane ‘designers’?) because their browser just doesn’t match up to what we as developers want. It’s called graceful degradation and IE should not be any exception to that.

For me it is important to degrade gracefully, but it is also important to cater to the large audience. We don’t need to make exceptions for the 0.2% that is still hung up on IE6 because that is not an effective use of time, but we should cater to the 67% that is using IE9.