Sticky Notes in CSS3

I've been inspired by Rob Hawke's Rawkets to get off my behind and start learning me some new standards. I'd known about HTML5 for a long time and have long been sceptical about it. What, with all the hoo-hah of HTML5 vs. Flash, and being an avid Flash fan, I didn't really want to concede at first glance. Now there's a future where they can work together, I guess it's a push in the right direction.

I like knowing what I'm doing. Heck, it took me a while to migrate from ActionScript 2 to 3, mainly because I was comfortable knowing what to do. But having done that, I know what used to take an age in an old language is a line of code in the new. So I best start learning some HTML5, then.

I took a quick glance over some of the specification for HTML5 and thought… well, like anyone would at the sight of a really long, text heavy document, "bugger it something must be happening on Facebook". But I took the sensible approach and took a look around some tutorials online.

One in particular caught my eye. Create a sticky note effect in 5 easy steps. I like sticky notes and I like the word 'easy'. Perfect. So I followed it.

The results came out as expected. When I first saw what the outcome would be (before giving building it a go) I was firmly in the mindset of "Yeah, okay, I'll believe it when I see it" and a few lines of code later there it was. It was mainly CSS3 rather than HTML5, but it was a start.

It's the first addition to my 'Experiments' area I'm sure I mentioned briefly a few posts ago. There'll be a few fleeting little ideas popping up around in that folder which will be documented here. Of course, I would walk you through what I've done so far, but the linked tutorial does that pretty well. I'll play around with some code for a bit and see what I can come up with. See you on the flipside!