User Tools

Site Tools


ce4_linear-gradients

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

ce4_linear-gradients [2014/01/08 03:53]
matthew created
ce4_linear-gradients [2014/01/08 04:13]
matthew
Line 25: Line 25:
 Older browsers not supporting linear-gradients will fall back on the element'​s defined background-color. Therefore, when setting a linear-gradient,​ __set an appropriate background-color first__. Older browsers not supporting linear-gradients will fall back on the element'​s defined background-color. Therefore, when setting a linear-gradient,​ __set an appropriate background-color first__.
  
 +==== Color Stop ====
  
 +The **Color Stop** slider controls the coverage of the gradient as a percentage of the document area. A value of 100% will cause the gradient to cover the entirety of the document, while a value of 50% will cause half the document to be gradient, while the remaining half is a solid color.
 +
 +==== Direction ====
 +
 +The **Direction** slider controls the direction of the gradient. Due to its using an older version of the CSS3 linear-gradient specification,​ the direction of your gradient, as visible in the Lightroom 5 Web preview, will round off to the nearest cardinal or ordinal compass direction. Outside of Lightroom'​s preview (i.e. online) the linear-gradient'​s direction will be more precise to the set value.
 +
 +For accurate results in the preview, use the values 0, 45, 90, 135, 180, 225, 270, 315 or 360, which represent cardinal (0, 90, 180, 270, 360) and ordinal (45, 135, 225 and 315) compass directions. Values in between will round to the nearest cardinal or ordinal compass direction. Use the following table to translate your values.
 +
 +**Linear-gradient Direction**
 +
 +^Value Range ^During Preview, Rounds to ... ^Description ^
 +| 0 - 23 | 0 | bottom to top |
 +| 24 - 67 | 45 | bottom-left to top-right |
 +| 68 - 112 | 90 | left to right |
 +| 113 - 157 | 135 | top-left to bottom-right |
 +| 158 - 202 | 180 | top to bottom |
 +| 203 - 247 | 225 | top-right to bottom-left |
 +| 248 - 292 | 270 | right to left |
 +| 293 - 337 | 315 | bottom-right to top-left |
 +| 338 - 360 | 360 | bottom to top |
 +
 +==== Color A & B ====
 +
 +**Color A** is the gradient'​s beginning color.
 +
 +**Color B** is the gradient'​s ending color.
 +
 +Color A and Color B each have an alpha slider which controls the color'​s opacity, with a value of 0 being completely transparent and a value of 100 being entirely opaque.
 +
 +The linear-gradient rests atop the element'​s background-color. Therefore, if your linear gradient is partially transparent,​ and your background-color for the element is white, then the white background will show through the linear-gradient.
ce4_linear-gradients.txt ยท Last modified: 2014/01/08 04:13 by matthew

The Turning Gate
Creating webbly, wobbly, Lightroomy things since 2007.