CSS3 Spotlight effect

http://svay.com/experiences/css3-spotlight/

by mauricesvay • 16 years ago

23 11 16 years ago

svay.com

telemachos• 16 years ago

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

ramkalari• 16 years ago

Looks awesome

necubi• 16 years ago

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.

sid02• 16 years ago

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

jamesshamenski• 16 years ago

web screencasts FTW

bd• 16 years ago

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• 16 years ago

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• 16 years ago

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.

sid02• 16 years ago

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

cubtastic71• 16 years ago

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

kellishaver• 16 years ago

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/

CSS3 Spotlight effect

Related Stories