CSS3 Spotlight effect (opens in new tab)

Here is my quick attempt to reproduce the effect just with CSS2 and transparent PNGs:

http://alteredqualia.com/visualization/css2-spotlight.html

It's still a bit buggy around the edges, but it's much faster than CSS3 one.

Plus it works also in Opera (and probably could be forced to run in Explorer with a bit more care).

-----

Edit: fixed bugs around edges and made it work in Explorer 8 (which is surprisingly the fastest).

About performance: the biggest difference is in Firefox (standard release 3.6.3, no development HW accelerated builds).

In case anybody's wondering, it works by moving a radial gradient with 0 alpha at the center using javascript. It's slow on Chrome, probably due to the effort required to redraw the gradient at every time step.

A better approach, at least for webkit browsers, would be to use the new mask property.

For anyone wanting a cross-browser, javascript implementation, I wrote a (very tiny and simple) jQuery plug-in to do it a few months back: http://kellishaver.com/projects/flashlight/

CUTE- reminds me of the early Flash 3 stuff - A spotlight!!

Looks awesome

It looks cool as hell, but I can see it quickly becoming this generation's blink.

web screencasts FTW