Re: [css3-images] simplifying radial gradients

On Mon, Oct 10, 2011 at 2:32 PM, Brad Kemper <brad.kemper@gmail.com> wrote:
> On Oct 7, 2011, at 4:07 PM, "Tab Atkins Jr." <jackalmage@gmail.com> wrote:
>> On Fri, Oct 7, 2011 at 3:25 PM, Sylvain Galineau <sylvaing@microsoft.com> wrote:
>>> Whatever you think is more helpful. I'd personally start
>>> with something even more pedestrian and understandable to
>>> a larger audience. Take these two popular gradient demo
>>> pages:
>>>
>>> Lea Verou's pattern gallery: http://leaverou.me/css3patterns/#
>>> Estelle Weyl's gradient page: http://www.standardista.com/cssgradients/
>>>
>>> For each - or a large subset of them - I'd like to see either the
>>> equivalent based on Brad's proposal. Or an indication that it wouldn't
>>> be doable.
>>>
>>> Is it a perfect test ? No. But given where we are, I think it's fair
>>> to assess a simplification proposal in terms of the impact it would
>>> have on authors' ability to do what they already do.
>>
>> Most of the patterns in Lea's gallery don't use any sizing or
>> positioning at all, only color-stops, and so are equally doable with
>> either the current syntax or Brad's suggested change.  They would all
>> need their color-stop positions divided by sqrt(2), though, as Brad's
>> suggested default sizing behavior is "contain".
>
> IIRC, converting them is a matter of multiplying by 1.72 (or thereabouts).

1.41, which is approximately sqrt(2).

> Note that this doesn't mean taking some intuitive measure and converting it. Either syntax requires finding good color stop placement through trial and error, or by doing multiplication/division of the gradient line length. .

Not true, at least generally.  For example, if I wanted the equivalent
of a simple "cover" gradient with stops at 0%, 50%, and 100%, with
your simplified syntax I'd instead have to place the stops at 70.7%
and 141.4%.  It's silly to require trial and error and non-intuitive
numbers for such a simple gradient that would be relatively common.
Being able to differentiate between "cover" and "contain" gradients is
pretty useful.


> On the other hand, I am reconsidering my stance on bg-position within the gradient image. If still adds a complexity, but it was limited to sides and corners, the way linear-gradient is (maybe even with 'from' keyword), and the way you suggested recently before changing your mind, then it would still be much less complicated than if any bg-position was allowed (percentages, lengths, etc.). Then if you had a color stop at, say, 10%, that would always be either 10% of the width or 10% of half the width of the image itself (substitute the words "narrowest dimension" instead of "width", if the 'circle' keyword is used). And you gain easier alignment with element edges/corners. For arbitrary placement in a background, 'background-position still works well.
>
> It is really the changing of the gradient path length in multiple ways that makes it so complicated and hard to conceptualize in one's head, when you start combining gradient sizing  (explicit or by keywords, in two dimensions) with all the ways you can change the path length by moving the center around by random amounts vertically and horizontally, and then combining all that with the often unexpected ways that they interact with 'circle'. But I can see the value of having an easier way to align the centers with edges and corners of the element background, than trying to percentages in background-position.

I agree, somewhat.  Gradients centered somewhere other than
center/side/corner, gradient with implicit sizing, and gradients with
percentage color-stops are all useful and easy to use by themselves.
Combining two of those features is also generally all right.  It's
when all three of them combine, like in
<http://leaverou.me/css3patterns/#hearts>, that they become really
confusing.

However, *there's almost no reason to ever combine all three of those
features*.  The Hearts pattern could be written *much* simpler if an
explicit size was used, or if non-percentage color-stops were used, or
if the gradients were centered and then background-position'd into
place.  It's just bad authoring that produced that particular
confluence of confusion.

One must balance powerful features with the possibility for confusion.
 I think it's been done pretty decently here.  It's relatively
difficult to write a gradient that runs into the bad
"unpredictably-sized nested coordinate space" issue, and when one does
it's very easy to get back into simple territory without losing any
power.


> I really think you are exaggerating the difficulty of just using color-stop  positions instead of separate sizing via keywords. If the 100% color stop was always to the side, then it is a very simple matter to create a color stop that is greater than 100%. And even if you go slightly past the corner, it's rarely going to make any difference to the design. It is a good thing to be able to rely on 100% being in the same relative place all the time. If the gradient line is measured from left to right, then it is intuitive for 100% be where it intersects the right edge. This also makes it more conceptually consistent with linear gradients.

I think we just have to disagree at this point.  I think it's
sufficiently valuable to be able to switch between easily touching the
side vs easily touching the corner.

~TJ

Received on Tuesday, 11 October 2011 16:59:36 UTC