W3C home > Mailing lists > Public > www-style@w3.org > March 2011

Re: [CSS3] linear-gradient() proposal

From: Andrew Fedoniouk <andrew.fedoniouk@live.com>
Date: Sun, 27 Mar 2011 23:11:34 -0700
Message-ID: <BLU159-ds212A3609D433584DABDCB9F8BA0@phx.gbl>
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: <www-style@w3.org>
>-----Original Message----- 
>From: Tab Atkins Jr.
>Sent: Sunday, March 27, 2011 6:34 PM
>To: Andrew Fedoniouk
>Cc: Andrew Fedoniouk ; www-style@w3.org
>Subject: 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.

To be honest I do not understand how length units are used in angle 

Let's say:

  linear-gradient(45deg, red 100px, yellow 50%, green 200px);

100px from what?

Gradient is a line segment: start-point .. end-point.
So I assume that  "red 100px" is a point on the line outstanding
100px from starting point.  But that starting point as far as I understand
is floating - there is no way to attach it to say top/left corner, right?

And if last point is defined as 'green 200px' then where exactly 50%
will land?
To 100px  on the range 0..200px or
to  150px on 100px .. 200px range ?

Is all this supposed to be intuitive? It is not in my opinion.

In general all systems that I know use gradients with start/stop points - 
not angles.
Angle if needed is defined as rotate(angle) transformation of the gradient
line segment.

So if someone want to see gradient on 0,0 to 45,45px segment then
it is enough to define:

  linear-gradient( 0 0 45px 45px, color-stops ...  )

if gradient needs to be placed in bottom/right corner then something
like this would work I think:

  linear-gradient( right(45px) bottom(45px) 100% 100%, color-stops ... )

In this case you can reproduce any imaginable gradients.

And of course color stops should accept nothing but percent.

Andrew Fedoniouk

Received on Monday, 28 March 2011 06:12:08 UTC

This archive was generated by hypermail 2.4.0 : Friday, 25 March 2022 10:07:57 UTC