Galen Gidman Web Developer

CSS3 Sticky Note

Dec 13, 2010

Back in August, Christian Heilmann over at Nettuts wrote a post in which he created CSS-only sticky notes. While his result was decent, I began to wonder if I could do better.


I started with a container <div> that served as the base for the sticky note. To this I applied a CSS gradient that faded between 3 different shades of yellow (#ffee66 to #f5da41 to #f6ef97). I applied a couple of small box-shadows that gave it some depth.

Next it was time to create the two angled shadows under the note that give it the curled effect. To do this, I used :before and :after pseudo selectors with content: '';. This essentially gave me two elements I could manipulate without crudding up the HTML. I made them I gave them a partially transparent black background using rgba and applied a black box-shadow to give them a blurred look. After that it was simply a matter of positioning them and setting the z-index to -99 so they would show up behind the note.

To give it even more of an authentic look I found a handwritten font on the Google Font Directory that looked pretty good.

Demo / Download

Let me know if you guys can think of anything that could be improved ā€” Iā€™d love to hear your ideas. Tweet me @galengidman!

Also, thanks for the tweet, Christian.