Unfortunately:
There are rendering problems in Firefox.
It's a fixed size and doesn't scale with the browser window resolution.
The same page can be achieved in a widely compatible way with a simple image.
The cut-off glow effect in Firefox? I guess the reason for that is a bug in the viewport calculation for the laser’s box-shadow. I mostly focused on webkit. If anyone knows a fix, code is here http://github.com/evilhackerdude/lasers
About resolution independence: I believe we could hack the CSS to use appropriate percentage values for the laser rays. Basically calculate a percentage for width or height in JS and apply that so it scales with the window automatically.
Comments
Impressive effects without using images.
Unfortunately: There are rendering problems in Firefox. It's a fixed size and doesn't scale with the browser window resolution. The same page can be achieved in a widely compatible way with a simple image.
It's a tech demo, not a cross browser compatible widget.
The cut-off glow effect in Firefox? I guess the reason for that is a bug in the viewport calculation for the laser’s box-shadow. I mostly focused on webkit. If anyone knows a fix, code is here http://github.com/evilhackerdude/lasers
About resolution independence: I believe we could hack the CSS to use appropriate percentage values for the laser rays. Basically calculate a percentage for width or height in JS and apply that so it scales with the window automatically.