Recommended Reading: Lea Verou - CSS3 Patterns Explained

During the course of my development adventures I realized something; I haven’t done nearly enough with the latest and greatest stuff. By that I mean things like complex CSS3 and HTML5 transitions. I’ll start with the CSS3 and save the HTML5 stuff for a later post.

CSS3 LogoHonestly, is there anything cooler than this and the HTML5 logo? Bravo.

In searching out techniques on the web the first two results were by Lea Verou. Turns out she’s all kinds of awesome at creating extremely complex CSS3 patterns. You can take a look at the first page I stumbled on here or you can just google ‘css3 patterns‘ and she’s all up in those results. Now, her site offers a large variety of increasingly more complex patterns and the code it takes to create them. Let me just say, she’s got some talent, some of these are just crazy. So that immediately got me thinking – ok, I see this, I see the code, but I need to know what exactly is going on to produce these things. Lucky, the very next web result was a post she wrote for 24ways.org.

The post was written explicitly for the novice so it was right up my alley. I’ll leave the reading to you but there were a few key points that I found pretty interesting. The most intriguing of those was the fact that the pure css based options that she’s created aren’t always a better solution than a background image. That was a bit stunning because a lot of what I’ve read over the past few years has preached using the css solution vs. any image based solutions. Her given reason for choosing an image based solution basically boils down to complexity and manageability.  If you’re using so many gradients to create the effect that it becomes too hard to manage or change quickly – just use the image. And, let’s be honest, it makes sense.

The other interesting thing I took away from this was that you could layer as many of these gradients on top of each other as necessary. This technique coupled with transparent backgrounds allows for ever more complex designs. If you go take a look at some of the examples she’s posted the heavier ones can use upward of ten layered gradients that all have a dizzying amount of color stops.

I thought I might want to try some of these out for myself so I ran over to codepen.io to create a few myself following her examples. I quickly realized I wasn’t going to be creating any elaborate and awesome patterns any time soon but creating a zig-zag or checkerboard design was super do-able.

comments powered by Disqus