Upholstery

Sometimes, you just gotta keep it classy.

by nate

HTML

<b></b>

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

<h1>Upholstery</h1>

<p>Sometimes, you just gotta keep it&nbsp;classy.</p>

CSS

/* Upholstery Pattern Styles */
li#upholstery, b {
    background-color: hsl(0, 100%, 10%);
    
    /*
     * You may notice that all the design elements come in pairs:
     * This is to create the diagonal repeating pattern.
     * Each design element comes with a twin that is offset by
     * half of the pattern's width.
     *
     * The gradients themselves are all handled in background-image.
     * Their position (where the offsets happen) take place in background-position.
     * Finally, their sizes (which are all the same in this pattern) are in background-size.
     */
    
    /* Webkit time! */
    background-image:
        
        /* Upholstery buttons */
        -webkit-radial-gradient(
            hsl(0, 100%, 27%) 4%,
            hsl(0, 100%, 18%) 9%,
            hsla(0, 100%, 20%, 0) 9%
        ),
        -webkit-radial-gradient(
            hsl(0, 100%, 27%) 4%,
            hsl(0, 100%, 18%) 8%,
            hsla(0, 100%, 20%, 0) 10%
        ),
        
        /* Pillowy highlights */
        -webkit-radial-gradient(
            hsla(0, 100%, 30%, 0.8) 20%,
            hsla(0, 100%, 20%, 0)
        ),
        -webkit-radial-gradient(
            hsla(0, 100%, 30%, 0.8) 20%,
            hsla(0, 100%, 20%, 0)
        ),
        
        /* Diagonal indent shadows */
        -webkit-radial-gradient(
            hsla(0, 100%, 20%, 1) 35%,
            hsla(0, 100%, 20%, 0) 60%
        ),
        -webkit-radial-gradient(
            hsla(0, 100%, 20%, 1) 35%,
            hsla(0, 100%, 20%, 0) 60%
        ),
        
        /* Shadows over lines/highlights */
        -webkit-radial-gradient(
            hsla(0, 100%, 15%, 0.7),
            hsla(0, 100%, 20%, 0)
        ),
        -webkit-radial-gradient(
            hsla(0, 100%, 15%, 0.7),
            hsla(0, 100%, 20%, 0)
        ),
        
        /* Crease lines */
        -webkit-linear-gradient(
            45deg,
            hsla(0, 100%, 20%, 0) 49%,
            hsla(0, 100%, 0%, 1) 50%,
  ...

JavaScript

$body = $( 'body' );

$( 'li' ).hover(
    function() {
        $body.addClass( 'hover' );
    },
    function() {
        $body.removeClass( 'hover' );
    }
);