Sunday 9 February 2014

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.

No comments: