

CSS3 Spotlight effect - mauricesvay
http://svay.com/experiences/css3-spotlight/

======
bd
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).

~~~
apphacker
That is pretty cool and creative. One thing though is that you have more
markup that does nothing and is only for the purpose of display.

You couldn't add your spotlight effect to css zen garden, but you could
possibly add the CSS3 spotlight.

~~~
ivanstojic
I think neither would qualify because both require a JavaScript component to
actually work as a spotlight.

Neither of the submitted solutions are particularly novel, but I'd applaud the
CSS2 version more for (if nothing else) the supported browser coverage.

IMHO, there are _FAR_ more interesting things in HTML5/CSS3 than gradients.

------
necubi
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.

~~~
sid0
Yeah, it's pretty slow with Chrome. There's no "input lag" with hardware-
accelerated Firefox though.

------
kellishaver
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/>

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

------
ramkalari
Looks awesome

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

------
jamesshamenski
web screencasts FTW

