Post it notes
To ensure the padding doesn’t add any height while still lowering the text, set a min and max parameter on the height.
The height is somewhat complicated because I want the text to begin lower on the Post-it rather than at the top. This is the basic square that will be built around your content. If you aren’t interested in my life story, feel free to skip to the end for a quick ‘plug and play’ code snippet. The process itself might be helpful for some people – it was certainly helpful for me. I broke the instructions up into key elements so the uninitiated can get a feel for how I constructed everything. That’s right, the post it you see on the right is 100% CSS.
Who doesn’t love Post-it notes? In my previous life, before I started learning CSS, I would ask myself “how can I make a convincing looking Post-it note in Photoshop?” After extensive CSS study and research I have come to realize that some things can be done with CSS alone. Firefox stopped using transform skew, and moved to transform matrix code.
POST IT NOTES UPDATE
I have updated the final code to function properly with the Firefox14 update from July 2012.