4 ms·

CSS3 Spotlight effect

23 points by mauricesvay 17y ago

jamesshamenski 17y ago
web screencasts FTW
telemachos 17y ago
It looks cool as hell, but I can see it quickly becoming this generation's blink.
ramkalari 17y ago
Looks awesome
necubi 17y 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.
- sid0 17y ago
  Yeah, it's pretty slow with Chrome. There's no "input lag" with hardware-accelerated Firefox though.
bd 17y ago
Here is my quick attempt to reproduce the effect just with CSS2 and transparent PNGs: http://alteredqualia.com/visualization/css2-spotlight.html 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 17y 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 17y 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.
- sid0 17y ago
  Nice, though I don't see a speed difference between the examples.
cubtastic71 17y ago
CUTE- reminds me of the early Flash 3 stuff - A spotlight!!
kellishaver 17y 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/ http://kellishaver.com/projects/flashlight/

23 points by mauricesvay 17y ago

jamesshamenski 17y ago

web screencasts FTW

telemachos 17y ago

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

ramkalari 17y ago

Looks awesome

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

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

bd 17y ago

Here is my quick attempt to reproduce the effect just with CSS2 and transparent PNGs: http://alteredqualia.com/visualization/css2-spotlight.html 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 17y 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 17y 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.
sid0 17y ago
Nice, though I don't see a speed difference between the examples.

cubtastic71 17y ago

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

kellishaver 17y 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/ http://kellishaver.com/projects/flashlight/