Re: [css3-images] simplifying radial gradients

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

There are only a few that seem complex enough to be relevant:

1. <http://leaverou.me/css3patterns/#hearts>  This pattern is authored
in a confusing way, because Webkit/Gecko don't currently support
explicit sizing, which would make this much simpler.  It is possible
to write it in an equally simple manner that is compatible with Brad's
suggested syntax.

2. <http://leaverou.me/css3patterns/#waves> This cannot be reproduced
in Brad's suggested syntax.  It relies on the ability of the current
syntax to create a "half-ellipse".

3. <http://leaverou.me/css3patterns/#yin-yang> This cannot be
reproduced in Brad's suggested syntax, for the same reason as #2.

4. <http://leaverou.me/css3patterns/#seigaiha> Same as #2.


Estelle's are similar - many of them use only color-stops, or
color-stops plus 'contain', the latter of which would just require
dividing all the color-stop positions by sqrt(2) under Brad's
suggested syntax.  A few are complex enough to be interesting:

1. Apples.  Again with the need for half-circles.  This is pretty far
down the "you should be using SVG" trail, though.

2. Radial Hearts.  Once again with the need for partial-ellipses.
These aren't quite half, but they do rely on the part of the gradient
outside the drawing area being clipped.  They could probably also be
simplified a little bit with explicit sizing.


Overall, most of the gradients displayed in these two galleries do not
use any complex sizing or positioning at all, and wouldn't be altered
if those were dropped.  Several rely on the simple sizing of the
'contain' and 'cover' keywords, and would have to alter their
color-stops in a non-obvious way under Brad's proposed syntax.  A few
from each do require the more complex syntax currently in the spec,
mostly relying on the fact that half of a gradient is not displayed if
you position the center on one of the sides.  A few would be
significantly simplified by explicit sizing, but may also be amenable
to using background-size.

~TJ

Received on Friday, 7 October 2011 23:08:01 UTC