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.
Labels:
art,
css3,
web development
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment