CSS3 Spotlight effect | Hacker News Reader

CSS3 Spotlight effect

svay.com

23 pointsmauricesvay11 comments

Open articleView on HN

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

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.

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.

Nice, though I don't see a speed difference between the examples.

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.

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

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

Reply on news.ycombinator.com