Sticky Notes In 5 Easy Steps Using CSS3 and HTML5

Christian Heilmann posted a five-steps tutorial on creating a fancy sticky note effect using CSS3 and HTML5: "smoothly animating and tilted sticky notes without any use of images or JavaScript – supported by Firefox, Opera, Safari and Chrome and falling back to a set of yellow boxes in older browsers. By clever use of the […]

Christian Heilmann posted a five-steps tutorial on creating a fancy sticky note effect using CSS3 and HTML5: "smoothly animating and tilted sticky notes without any use of images or JavaScript – supported by Firefox, Opera, Safari and Chrome and falling back to a set of yellow boxes in older browsers. By clever use of the nth-child selector and CSS transformations and transitions, we saved ourselves some scripting. Further, Google's Web Font API made it easy to use a custom font. Using both hover and focus for the effect also means that keyboard users can observe the results as well."

More Info: Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5