User Tools

Site Tools


CSS3 Linear Gradients

In several places, CE3 plugins offer controls for linear gradients. Gradients replace background-color, and the controls look like this:

The reason we list this as an “Advanced” concept is that Lightroom 4 is incapable of previewing gradients, and also because the CSS3 gradient specification is still a moving target and comes with a handful of gotchas.

This article aims to illuminate the situation of gradients in Lightroom so that you may learn to make use of them, or make the informed decision not to use them.

The History of Gradients in Lightroom

At the heart of all gradient issues is web-browser implementation. Because the CSS3 specification for gradients is still in development, the implementation of gradients varies for each major web-browser, sometimes by only a little and sometimes by a lot. This introduces some problems when we attempt to create a unified set of controls that can programmatically apply consistent gradients for all browsers.

We first introduced gradient controls into TTG plugins during the Lightroom 3 life-cycle. At that time, Lightroom's Web preview was divided between platforms. LR3/Win used Internet Explorer to preview web galleries, and LR3/Mac used Safari. And so, LR/Win has never been capable of previewing gradients within the Web module, while LR/Mac could prefer gradients at that time.

When Adobe released Lightroom 4, they implemented their in-house APE web-browser for the Web module preview, which standardized the Web preview between Windows and Mac versions of Lightroom. Though the APE browser is somewhat outdated and quirky, this standardization was in many ways a good thing. Unfortunately, the APE browser does not support CSS3 gradients, so LR/Mac users lost that capability.

Still, we couldn't very well remove the gradient controls, as people already had colors dialed in, whether they could see them in LR4 or not …

Workarounds for Previewing Gradients

So, how does one preview gradients during the design process?

You can export galleries, pages, etc. and load into a virtual server environment such as MAMP, WAMP or the like.

But I think it far easier to with with one of the plugins capable to exporting as HTML. That makes TTG CE3 Gallery the most likely candidate. Disable any features that trigger the export of PHP documents, so disable password protection, Open Graph Protocol, permalinks, PHPlugins.

This also works best when you only have a few images selected in the filmstrip, to speed up exports. Otherwise, rendering will take too long.

Set your gradients, then use Lightroom's “Preview in Browser” button to get a look at your gradients in the browser.

After you're satisfied with your gradients, you can then enable any PHP features you would like to use for your gallery online.

Also, always set a non-gradient background-color for your galleries and pages, as it will be used as fallback when gradients are unsupported by browsers.

What about those "gotchas"?

Our gradient controls are adequate for setting gradients in 90-degree directional increments. So vertical and horizontal gradients work well.

For diagonal gradients, things get tricky due to variances in browser implementation. In these situations, it's usually better to handcode gradients via PHPlugins and custom CSS. Not fun, but this is the world we live in right now while we wait for two things to happen:

  1. The CSS3 Gradient specification to be hammered into final form.
  2. Major web-browsers to adopt and implement that final form.

And maybe someday Adobe will update Lightroom's APE browser to support CSS3 Linear Gradients in any form …

css3_linear_gradients.txt · Last modified: 2013/03/21 07:02 by admin