- From: Dave Singer <singer@apple.com>
- Date: Tue, 7 Sep 2010 20:27:03 -0700
- To: fantasai <fantasai.lists@inkedblade.net>
- Cc: "Tab Atkins Jr." <jackalmage@gmail.com>, Simon Fraser <smfr@me.com>, www-style list <www-style@w3.org>
actually I think I can be vastly clearer and also merge a whole load of suggestions/solutions. and (the devil of people who used to be in research departments) generalize! Try this: Linear gradients. These are drawn between two parallel lines (the 'from' and 'to' lines), which are perpendicular to the gradient vector. The intersection of the 'from' line and the gradient vector is less far along the vector than the intersection of the 'to' line. Each of these lines intersects the shape to be filled at the furthest possible extremity in the negative ('from') and positive ('to') directions along the gradient vector. (Which means we don't need to care about what the colors are before 'from' or after 'to' since they are not visible). This generalizes your diagram for the 'to' line and uses it for the 'from' line. It also covers the degenerate cases where the furthest extremity is a line (0, 90, 180, and 270). It fills from any corner or edge in any stable direction. So, what fill cases does this *not* cover? Well, those whose direction is determined by the geometry of the box that they are filling. Since the box edges are vertical and horizontal (known directions), that leaves us with diagonals. So, the next more general syntax is where the first argument is *either* a vector direction (number), or one of the four vectors bl- tr, tl-br, tr-bl, br-tl (t[op], b[ottom], l[eft], r[ight], obviously). We only need the diagonals as a special case. Ah, but we can deal with some of Elika's incisive question about the axis system in use, if we go for two arguments; then the gradient vector is defined by an angle relative to a base vector. So, then we have a syntax with two arguments; a base direction, specifying two corners plus an angle relative to that base direction the first argument is one of the possibilities: b-t, t-b, l-r, r-l, bl- tr, tl-br, tr-bl, br-tl the second is an angle relative to that base vector the two combined give a computed gradient vector, and after that, everything falls out. Transitions are then defined as interpolating between the computed gradient vectors, of course. Now we only need one syntax and we can interpolate, and so on. linear-gradient( base-direction, relative-angle, from-color, to-color, {stop%, stop-color}* ) where from-color is defined as from 0% and to- color is defined as to 100%. cleaner? clearer? Dave Singer Multimedia and Software Standards, Apple singer@apple.com
Received on Wednesday, 8 September 2010 03:27:52 UTC