Sticky note

by spliter

HTML

<div class="stickyNote">
<span class="close">x</span>
<h1>A title for the note</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed odio dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Maecenas sed diam eget risus varius blandit sit amet non magna. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
    </div>

CSS

body {background: #fff; padding: 3em; font-family: "Handlee"}
.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: @baseLineHeight;
  color: @black;
  text-shadow: 0 1px 0 rgba(255,255,255,1);
  .opacity(20);
}

.stickyNote {
    padding: 1em;
    font-size: 1.3em;
    position: relative;
        
background-color: #f7f3bb;
background-image: -webkit-gradient(radial, 50% 50%,200,50% 50%,20, from(rgb(247, 243, 187)), to(rgb(249, 247, 210)));
background-image: -webkit-radial-gradient(50% 50%, rgb(249, 247, 210), rgb(247, 243, 187));
background-image: -moz-radial-gradient(50% 50%, rgb(249, 247, 210), rgb(247, 243, 187));
background-image: -o-radial-gradient(50% 50%, rgb(249, 247, 210), rgb(247, 243, 187));
background-image: -ms-radial-gradient(50% 50%, rgb(249, 247, 210), rgb(247, 243, 187));
background-image: radial-gradient(50% 50%, rgb(249, 247, 210), rgb(247, 243, 187));

    
   -o-transform:rotate(-1deg);  
  -webkit-transform:rotate(-1deg);  
  -moz-transform:rotate(-1deg); 
    
          -moz-box-shadow:5px 5px 7px rgba(33,33,33,.5);  
  -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.5);  
  box-shadow: 5px 5px 7px rgba(33,33,33,.5);  
    

}

h1 {
    font-size: 1.4em;
}

.stickyNote:before {
    content: "";
    width: 110px;
    height: 50px;
    background: rgba(255,255,255,.3);
    position: absolute;
    top:-25px;
    left: 40%;
    
      -moz-box-shadow:0 0 2px rgba(33,33,33,.2);  
  -webkit-box-shadow: 0 0 2px rgba(33,33,33,.2);  
  box-shadow: 0 0 2px rgba(33,33,33,.2); 
}