The hack only works in Firefox; IE does not support repeating-radial-gradient and Webkit's -webkit-repeating-radial-gradient does not attempt to render the gradients with the subpixel (im)precision required for the effect. In Firefox, simply resizing the browser window in either dimension will change the way this is rendered, and scrolling the page will probably cause it to glitch. Try it!
Here's a screencap from Firefox, which is pretty much guaranteed not to look exactly like the above...even if you're viewing this in Firefox.
The code contains several magic numbers which were selected just to make this look funky.
<div style="height: 500px; overflow: hidden; position: absolute; width: 500px;"> <div style="background: -moz-repeating-radial-gradient(red, red 2px, blue 2px, blue 3px); height: 800px; position: absolute; top: -200px; width: 800px;"> <div style="background: -moz-repeating-radial-gradient(black, black 1px, transparent 1px, transparent 2px); height: 850px; left: -150px; position: absolute; top: 100px; width: 830px;"> </div> </div> </div>
You can also fill the entire viewport with pretty interference patterns using a tiny HTML document. Resize the browser for eye candy. Endless fun for the whole family!
<!DOCTYPE html><html><head><title>Moire</title></head> <body> <div style="background: -moz-repeating-radial-gradient(black, black 1px, transparent 1px, transparent 2px); position: absolute; top: 0; left: 0; width: 100%; height: 100%"> </div> </body> </html>
Warning: Applying the gradient directly to the body element may cause Firefox to hang and eat a ton of memory. It looks like a bug was filed on this over a year ago with priority "critical", but it's still open. So...don't do that.
No comments:
Post a Comment