CSS3 Patterns

Disclaimer: These work best in Firefox 26.0 or Internet Explorer 11.0 - they should work in Chrome 32.0 but I've noticed the rendering unfortunately isn't quite as good as Firefox's, so the flowers look jagged. So, yeah, you might be seeing a bunch of words and no pretty pictures, but fear not, I've screencapped a couple if you don't happen to use one of these browsers.

Right, I got a bit distracted from coursework and started playing around with some CSS to make a new website design...I quickly got bored of that and decided to have a go at making some patterns using CSS3 gradients. I came across Lea Verou's page on gradient patterns when I was looking into CSS3 while working at Nokia a couple of years ago. I didn't really have a good reason to use them back then, so I filed the page away for later.

One and a half years later, here I am, fiddling about with gradient styles. At first I just didn't get what what going on, but trial and error led me to this:

Nice enough, but kind of plain. Further messing around, and I made something a bit more exciting:

And eventually, I made some flowers and leaves:

I'm quite pleased with how they turned out - not sure if I'll end up using these for anything, but I'll stick the code up on GitHub once I've tidied it up and added the backwards compatible tags.