Re: [CSS3] linear-gradient() proposal

Brad, start and end points of linear gradient in your version are non-deterministic in the sense that it is not possible
to define where gradient starts and where it ends precisely.  So these cases:
http://terrainformatica.com/w3/linear-align-2.png are simply impossible to define with your schema (sorry for “cauchemar” colors there).

Radial gradient allows to define precisely where the gradient starts and where it ends with various handy presets: 
http://terrainformatica.com/w3/radial-align-positioning.png

I would expect to see linear gradient to be on a par with radial gradient features as 
conceptually they are close: both use start point and radius of a circle.

In fact we can extend radial-gradient()  to be used for linear gradient purposes.

Consider this: 
<radial-gradient> = linear-gradient(
 [<bg-position>,]? 
 [[
    [ <direction>]
    |
    [<length> | <percentage>]{2}
    | 
    [<angle> || <length>]
 ],]? 
 <color-stop>[, <color-stop>]+
)
Where <direction> is [top | bottom] || [left | right]

This will cover all cases with still simple ways of defining most popular variants:

linear-gradient( left, red, yellow ) – cover with horizontal gradient.
linear-gradient( 50%, left, red, yellow ) – left half with gradient, right is of solid red color.
linear-gradient( 50%, right, red, yellow ) – right half with gradient, left is of solid red color.

linear-gradient( 0 0, 100% 100%, red, yellow ) – diagonal gradient.
linear-gradient( 50% 50%, 100% 100%, red, yellow ) – diagonal gradient starting in the center.

linear-gradient( 50% 50%, 45deg 50%, red, yellow ) – gradient starts in the center
and rotated 45deg with radii (length of gradient vector) equal to 50% of max(width,height).

This covers all cases I think and compatible with radial gradient.

I’ve implemented your schema already and discovered that it is quite limiting.
It is useful in quite narrow range of angles. 
E.g. this linear-gradient(top left, yellow, blue);
looks almost the same in your case for angles 30..60. So it is not clear why do you 
need angles there at all.

-- 
Andrew Fedoniouk

http://terrainformatica.com







From: Brad Kemper 
Sent: Monday, March 28, 2011 8:31 AM
To: Andrew Fedoniouk 
Cc: Tab Atkins Jr. ; www-style@w3.org 
Subject: 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

Received on Tuesday, 29 March 2011 03:52:45 UTC