CSS3 Patterns

Lots of 'em.

HTML

<h1>FED Challenge #2</h1>

<p>Make a bad-ass new <a href="http://leaverou.me/css3patterns/">CSS3 pattern</a>.</p>

<li id="upholstery2"></li>

<li id="upholstery"></li>

<li id="redcurtains"></li>

<!-- ideas -->
<li id="architect">TVs</li>

<li id="pyramids"></li>

<p>Submit entries as a jsFiddle to <a href="mailto:[email protected]">[email protected]</a>.</p>

CSS

body {
    background-color: hsl( 0, 60%, 60% );
    color: hsl( 0, 0%, 80% );
    font-family: monospace;
    font-size: 18px;
}

h1 {
    font-size: 36px;
    margin-bottom: 18px;
    text-shadow: 2px 2px 0 hsl( 0, 0%, 0% );
}

p {
    clear: left;
    margin-bottom: 18px;
    text-shadow: 1px 1px 0 hsla( 0, 0%, 0%, 0.5 );
}

a {
    color: hsl( 0, 0%, 50% );
}

li#upholstery2 {
    background-color: hsl(0, 100%, 20%);
    background-image:
        /* Upholstery buttons */
        -webkit-radial-gradient(
            hsl(0, 100%, 20%) 0%,
            hsl(0, 100%, 17%) 5%,
            hsla(0, 100%, 20%, 0) 7%
        ),
        -webkit-radial-gradient(
            hsl(0, 100%, 20%) 0%,
            hsl(0, 100%, 17%) 5%,
            hsla(0, 100%, 20%, 0) 7%
        ),
        -webkit-linear-gradient(
            45deg,
            hsla(0, 100%, 20%, 0) 49%,
            hsla(0, 100%, 20%, 0.5) 50%,
            hsla(0, 100%, 20%, 0) 51%
        ),
        -webkit-linear-gradient(
            -45deg,
            hsla(0, 100%, 20%, 0) 49%,
            hsla(0, 100%, 20%, 0.5) 50%,
            hsla(0, 100%, 20%, 0) 51%
        ),
        -webkit-radial-gradient(
            hsla(0, 100%, 30%, 0.5) 20%,
            hsla(0, 100%, 20%, 0)
        ),
        -webkit-radial-gradient(
            hsla(0, 100%, 30%, 0.5) 20%,
            hsla(0, 100%, 20%, 0)
        ),
        /* The pillowy part of the upholstery */
        -webkit-radial-gradient(
            hsla(0, 100%, 20%, 0) 80%,
            hsl(0, 100%, 10%)
        ),
        -webkit-radial-gradient(
            hsla(0, 100%, 20%, 0) 80%,
            hsl(0, 100%, 10%)
        );
        background-position:
            0 0,
            50px 50px,
            0 0,
            0 0,
            50px 0,
            0 50px,
            0 0,
            50px 50px;
        background-size:
            100px 100px;
}

li#upholstery {
    background-color: hsl(0, 100%, 20%);
    background-image:
        /* Upholstery...