Re: Talk on radial gradients

On Mon, Aug 24, 2009 at 11:30 AM, Simon Fraser<smfr@me.com> wrote:
> On Aug 24, 2009, at 6:55 AM, Tab Atkins Jr. wrote:
>> 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.
>
> You can use getBoundingClientRect in JS. Pre-canned images would
> not work with flexible layouts.
>
> My point is not to dwell on this particular case, but to make the point
> that the assumption that authors almost always want radial gradients
> to fill the box may not be valid.

Hmm, okay, granted.  Do you have further examples, though?

The particular example you gave, frex, could be done with a little bit
of math in the JS by moving the starting-point and adjusting
color-stops.  This would be a little more complex than setting an
ending-circle explicitly, but not by much.  Alternately, you could get
a similar (but not identical) effect by using a box-shadow on the
foreground element itself.

I'm just really hesitant to add an explicit ending-circle declaration,
because it's rather complex (a full bg-position to place the center,
then up to two radiuses to finish it out).  I think you can get the
effects you want just by using <length> on your color-stops, and that
this technique is probably roughly as easy as an explicit
ending-circle declaration.  I'll change it if I have to, but I'm wary
of it.

>> However, SVG handles elliptical gradients just fine (just coded one
>> for myself to be sure).  How do you draw them on the Mac?
>
> It transforms the graphics context, which we can do for CSS gradients
> as well, so go nuts with ellipticals!

Awesome.

~TJ

Received on Monday, 24 August 2009 17:16:21 UTC