RE: [css3-images] simplifying radial gradients - Spotlight example

Again, this leverages background-position which is again not part of the desired approach.

-Brian

> -----Original Message-----
> From: Brad Kemper [mailto:brad.kemper@gmail.com]
> Sent: Saturday, October 08, 2011 3:37 PM
> To: Brian Manthos
> Cc: Sylvain Galineau; Alan Gresley; Chris Lilley; www-style@w3.org
> Subject: Re: [css3-images] simplifying radial gradients - Spotlight
> example
> 
> 
> On Oct 7, 2011, at 12:19 PM, Brian Manthos wrote:
> 
> > Here's a relatively simple example of the kinds of things I expect
> people to want to use gradients for in the next year or two.  Most of
> the complexity is due to browser differences such as rules vs. cssRules
> and the prefixing of gradients.
> >
> > Ignore the logic related to scenery.  That's just a random backdrop I
> cobbled together to have a visual behind the effect.
> >
> > The key function to look at it BuildSpotlight.  Notice that the
> responsiveness to mouse location only requires updating background
> image, and only to specify the center of the circle.  No color stops
> need to be adjusted.  No other CSS properties need to be nudged.
> >
> > Notes:
> > (1) I've only (briefly) played with this in FF7 and IE10.  Based on
> my other sample pages, I expect it works in Chrome and Safari (but I
> suspect not in Opera).
> > (2) On my machine it's a bit CPU-intensive in FF7 (even with "Use
> hardware acceleration when available").  I don't know why and it wasn't
> intentional.  If there's a simple workaround, private e-mail would be
> appreciated.
> 
> Here is a modified version that is compatible with my simplified
> syntax.

Received on Sunday, 9 October 2011 05:23:03 UTC