Re: [CSS3] linear-gradient() proposal

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

I don't know why. The draft seems pretty clear about it.

> 
> Let's say:
> 
> linear-gradient(45deg, red 100px, yellow 50%, green 200px);
> 
> 100px from what?

From the starting point, which is determined by the angle you gave. The text in the draft spells it out:

...the ending-point is the point on the gradient-line where a line drawn perpendicular to the gradient-line would intersect the corner of the box in that direction. The starting-point is determined identically, except in the opposite direction of the angle.

In fact, for 45deg, there is even an example in the spec of how to know where that is (example VII). 

The draft also mentions centering the gradient line in the center of the box, but that doesn't really matter. As long as it is at the specified angle and within the box, the end points are determined the same way.


> 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.  

Yes.

> But that starting point as far as I understand
> is floating - there is no way to attach it to say top/left corner, right?

Depends on what you mean by attached. A 45deg angle goes up and to the right, halfway between rightward and upward. If you wanted that direction to stay the same as that, but have the first color stop intersect with the upper left corner, then that's a more complicated requirement than this spec is designed to handle (but you can still use SVG for it). Or you can eyeball it to place the first color stop (experimenting with a couple of coincident contrasting color stops will help you see exactly where to put the stop, but different box dimensions will change it). The spec is optimized for simpler and more common situations.

If, on the other hand, you want a gradient that goes from gown and to the right, halfway between rightward and downward, then use -45deg or 315deg. This will cause your 0 point of the gradient intersect with the top left corner.

Or if you just want a gradient that goes from top-left to bottom-right, then use "top left" instead of an angle.

Is there some sentence in the draft that you feel is not clear about all this? It seems very clear to me.

> And if last point is defined as 'green 200px' then where exactly 50%
> will land?

Percentage placement has nothing to do with where you put the last color stop. A color stopped at 0% will always be that pure color at a corner (or full side) of the box, and a color stopped 100% will always that pure color at the opposite corner (or side). 50% is halfway between those 2 extremes.

> To 100px  on the range 0..200px or
> to  150px on 100px .. 200px range ?

Neither. It depends on the dimensions of the box. Again, the draft is quite clear: "the starting-point defines where 0%, 0px, etc are located when specifying color-stops, and the ending-point defines where 100% is located." From that, you can determine where any other percent is located.

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

It is in mine.

> In general all systems that I know use gradients with start/stop points - not angles.

Then you are not familiar with virtually every design/publishing software program that lets you set the direction of a gradient from the keyboard.

> Angle if needed is defined as rotate(angle) transformation of the gradient
> line segment.

Angles can be used to define rotations; it is true. They can also be used to define a one-dimensional linear direction. Generally, if you ask someone to draw a 45 degree angle, they will draw a line than goes up and to the right, without rotating anything.

> 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 ...  )

I think it will be a lot more common for someone to want a gradient to start in a corner or side, and then go either to the opposite corner/side or to go in a particular direction, and then to extend either the full distance (defined by the box) or some arbitrary distance. Rarely would a color need to line up precisely with some point such as x:45px and y:45px. Especially since most gradients will be smooth blends of color, where you wouldn't be able to tell by eye if it was precisely positioned on that point or not.

> 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 ... )

That is not as easy to read or to write, IMO.

> In this case you can reproduce any imaginable gradients.
> 
> And of course color stops should accept nothing but percent.

Well, that is unnecessarily limiting.




1) http://dev.w3.org/csswg/css3-images/#gradients