Re: [CSS3] linear-gradient() proposal

On Sat, Mar 26, 2011 at 10:15 PM, Andrew Fedoniouk
<andrew.fedoniouk@live.com> wrote:
> Following is about changes in the linear-gradient() function:
> http://dev.w3.org/csswg/css3-images/#linear-gradients
>
> Existing schema of computing angled gradients
> http://dev.w3.org/csswg/css3-images/gradient-diagram.png
> has one problem.
>
> Consider this element:
> div
> {
>  width:100%; height:100px;
>  background: linear-gradient(45deg, red, yellow, green, blue, magenta);
> }
>
> If to use current spec. then "gradient length" (distance between start and
> end
> along gradient beam) changes when width of the DIV changes.
> That is not expected and not desirable effect. Angled gradients are
> known to be stable to dimension changes.

No, that's completely expected and desirable - you're using percentage
offsets on your color-stops (implicitly - your first and last
color-stops are placed at 0% and 100% by default, and the inner stops
are spaced evenly between them).  Percentages are measured relative to
*something*, and in this case it's the box's size.  This is usually
what you want.

If you want stable offsets that don't change when the box changes
size, use lengths instead of percentages or auto sizes.

~TJ

Received on Monday, 28 March 2011 01:35:37 UTC