Pure CSS sticky note sandbox

Alter this as you like! Try transitions and add things! Whee!

HTML

<a id="awesome" 
class="stickynote" 
href="#">
    <span>Parkcompetie start op 8 april, heb jij je al ingeschreven?</span>
</a>

CSS

/* Transitions: */
.stickynote, .stickynote span {
    -webkit-transition: all .2s, line-height .1s;
    -moz-transition: all .2s;
    transition: all .2s;
}

/* Below is the exact CSS from the tutorial, with text styling added */
.stickynote span {
    display: block;
    overflow: hidden;
    position: absolute;
    top: -1em;
    padding: 1em;
    width: 8em;
    height: 8em;
    border-radius: 1em;
    background-color: #ccc; /* Fallback background color in case the gradient doesn't work */
     
    /* For compatibility, browser-specific gradients using colors #CCCCCC and #EEEEEE */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#cccccc', EndColorStr='#eeeeee');
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#eee));
    background-image: -webkit-linear-gradient(top, #ccc, #eee);
    background-image:    -moz-linear-gradient(top, #ccc, #eee);
    background-image:     -ms-linear-gradient(top, #ccc, #eee);
    background-image:      -o-linear-gradient(top, #ccc, #eee);
    background-image:         linear-gradient(top, #ccc, #eee);
    }
 
.stickynote {    
    display: block; /* Can also be "inline-block" */
    position: relative;
    width: 10em;
    height: 9.15em; /* Must be SMALLER than the span*/
    margin: 1.5em auto; /* Margin required on at least 3 sides */
    background-color: #000;
    
    /* Let's make the text pretty: */
    font: 1em/1.3em Courier, 'Courier New', monospace;
    text-decoration: none;
    text-align: center;
    color: #000;
     
    /* Drop shadows, browser-specific for compatibility */
    -webkit-box-shadow: 0 0 .75em #000;
    -moz-box-shadow: 0 0 .75em #000;
    box-shadow: 0 0 .75em #000;
     
    /* Rounded corners, browser-specific for compatibility. */
    -webkit-border-radius: 1.4em;
    -webkit-border-top-right-radius: 1.5em 10em;
    -webkit-border-top-left-radius: 1.5em 10em;
    -moz-border-radius: 1.4em;
    -moz-border-radius-topright: 1.5em 10em;
...