Nate Eagle

Front-End Developer

Upholstery: a CSS3 Pattern

By now, you’ve seen Lea Verou’s CSS3 Patterns Gallery. I really dug it when I saw it a few months ago. There are some nice patterns in there (carbon & Japanese cube are my favorites) and I love generating graphics with code. CSS gradient syntax made my brain hurt, though, and the first time I tried creating a pattern of my own, I wasn’t very successful.

When I used CSS gradients, I tended to generate them. That worked okay, but the problem with a tool like that is that it can leave you forever dependent on UI elements and tedious fiddling to get the effect you want. CSS syntax shouldn’t be so difficult that it requires a separate tool: the syntax is just a tool itself, after all, intended to make it easy to work with browser code more complicated than anything I’ll ever write.

So: we’ve started up a new tradition at AOL for front-end developers called the FED Challenge. It’s a biweekly contest that’s supposed to encourage developers to try out new techniques and technologies they might not already know about, or to try their hand at something they’re less familiar with. I decided to make the second FED challenge creating a CSS3 Pattern ala the examples in Verou’s gallery, which gave me a chance to finally get past my gradient brain pain.

I’m happy to report that it didn’t take very long. Luckily for all of us, Webkit has changed its gradient syntax to match Mozilla’s (clearly superior) syntax. And once I got an example in place in jsFiddle and started to play for a sustained amount of time, all the properties seemed to sort themselves out. (Play is, of course, one of the very best ways to internalize something you don’t know.)

Without further ado, here’s my submission:

I was messing around with radial gradients and got the idea that they could be used to create the puffiness of upholstery as well as the shadowed dimples of the buttons. I think it turned out pretty nice.

Check out the CSS in the tab up above for a highly-formatted, commented version of the CSS, which I find helpful when trying to look through someone else’s styles.

If you prefer, however, here is the simplest, streamlined, non-vendor-prefixed version of the CSS:

background:
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
    linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
    linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
background-color: #300;
background-size: 100px 100px;

I decided to submit the example to Verou after the contest, and she was kind enough to add it to the gallery.