Re: Talk on radial gradients

On Sun, Aug 23, 2009 at 11:43 PM, Simon Fraser<smfr@me.com> wrote:
> On Aug 23, 2009, at 11:18 am, Tab Atkins Jr. wrote:
>> Second, I don't think an ending circle is necessary *at all*, with a
>> point or radius.  As I mentioned above, in every case of a radial
>> ...
> I'm not sure I agree here. You could imaging a radial gradient background
> being used to highlight a foreground item. In that case you'd want to
> gradient
> to be a lot smaller than the box. Sure, you could add a color-stop, but ever
> additional color-stop adds complexity.

If you're highlighting a foreground item, you'll have to know how
large the item is and where it's positioned.  If you know that, you
can make yourself a gradient in any common image editor.

While it *would* be nice to address all use-cases, I'd prefer to focus
on those that are *impossible* to duplicate with an image editor
because they rely on information known only at runtime.  I think
making an explicit ending-circle declaration would complicate the
syntax to little gain.

Also, I don't believe an ending-circle declaration would be much
simpler than using a color-stop.  They're about the same in token
cost, after all.

>> Third, and this is something I'm not completely sure on yet but think
>> is probably important, you should be able to specify elliptical
>> shapes.
>
> I agree, but FYI elliptical shapes are not supported by Core Graphics on
> Mac,
> so there may be significant impediments to implementation.

Hrm.  That's a problem.  Without ellipses, though, radial gradients
are kinda useless.  By far their most common use on the web, I
believe, is to fill boxes according the box's shape.

That might be why Hyatt only did circular gradients at first.

However, SVG handles elliptical gradients just fine (just coded one
for myself to be sure).  How do you draw them on the Mac?

> In general I think the linear-gradient and radial-gradient syntaxes should
> be
> as similar as possible, to reduce the (already significant) brain-print of
> gradients. I'm not sure that differences in usage patterns are more
> important
> that making things easy to remember.

I agree that they should be as similar as possible.  I disagree that
differences in usage patterns are less important.  If two things are
used in substantially different ways in the wild, then trying to make
them conform to an identical syntax just results in the second thing
being easy to remember, but useless.

Overall, though, I've tried to keep it as close as possible to
linear-gradient.  They both share a starting-point and the color-stop
syntax.  There are only two small differences - <angle> makes no sense
in radial-gradient() which instead has <shape>, and the color-stops
have an additional keyword.  I might move that keyword elsewhere,
though, or (probably more likely) just drop it entirely and make
<length>s always refer to the width.

~TJ

Received on Monday, 24 August 2009 13:56:06 UTC