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 (
#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
: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
-99 so they would show up behind the note.
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.