neat background trick o_O

by Michael Dibbets

HTML

<div class=container>
    <input>
    <br>
    <button class=toggle>Toggle Background</button>
</div>

CSS

body {
    background-color: blue;
    text-align: center;
}
.container {
    position: relative;
    display: inline-block;
    margin-top: 100px;
}
.shape {
    position: absolute;
    background-color: white;
    padding:0px;
    margin:0px;
}
.noshapes .shape {
    display: none;
}

JavaScript

for (var i = 0; i < 10000; ++i) {
    var opa = Math.random() * 5 / 100;
    $("<div/>", {
        "class": "shape",
        css: {
            transform: "translate(" + Math.random() * 1000 + "px, " + Math.random() * 1000 + "px)",
            opacity: opa,
            height: Math.random() * 200 + "px",
            width: Math.random() * 200 + "px",
			"box-shadow": "0px 0px 20px 5px white"
        }
    }).prependTo("body");
}

$(document).on("click", ".toggle", function () {
    $("body").toggleClass("noshapes");
});