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.