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.
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.