Stickies

by Eric Blanchette

HTML

<p class="sticky taped" style="width: 250px;">
  <strong>The Little Turtle</strong>.<br />
  There was a little turtle.<br />
  He lived in a box.<br />
  He swam in a puddle.<br />
  He climbed on the rocks.<br />
  —Vachel Lindsay
</p>

<p class="sticky taped2" style="width: 250px;">
  <strong>The Little Turtle</strong>.<br />
  There was a little turtle.<br />
  He lived in a box.<br />
  He swam in a puddle.<br />
  He climbed on the rocks.<br />
  —Vachel Lindsay
</p>

<p class="sticky taped2 priority-low" style="width: 250px;">
  <strong>The Little Turtle</strong>.<br />
  There was a little turtle.<br />
  He lived in a box.<br />
  He swam in a puddle.<br />
  He climbed on the rocks.<br />
  —Vachel Lindsay
</p>

<p class="sticky taped2 priority-medium" style="width: 250px;">
  <strong>The Little Turtle</strong>.<br />
  There was a little turtle.<br />
  He lived in a box.<br />
  He swam in a puddle.<br />
  He climbed on the rocks.<br />
  —Vachel Lindsay
</p>

<p class="sticky taped2 priority-high" style="width: 250px;">
  <strong>The Little Turtle</strong>.<br />
  There was a little turtle.<br />
  He lived in a box.<br />
  He swam in a puddle.<br />
  He climbed on the rocks.<br />
  —Vachel Lindsay
</p>

CSS

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 100px;
  font-size: 13px;
  background: #2574B0 url(http://cssdesk.com/images/bg-blueprint.png);
}


.sticky {
  -webkit-box-shadow: #DDD 0px 1px 2px;
  position: relative;
  background-color: #F4F39E;
  border-color: #DEE184;
  text-align: center;
  margin: 2.5em 0px;
  padding: 1.5em 1em;
  -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  box-shadow: 0px 1px 3px rgba(0,0,0,0.25);
  font-family: Chalkboard, 'Comic Sans';
  
}
.sticky.taped:after {
  display: block;
  content: "";
  position: absolute; 
  width: 151px;
  height: 35px;
  top: -21px;
  left: 25%;    
  background: transparent url(tape.png) 0 0 no-repeat;
}
.sticky.taped2:after {
  display: block;
  content: "";
  position: absolute; 
  width: 110px;
  height: 30px;
  top: -21px;
  left: 30%;    
  border: 1px solid #fff;
  background: rgba(254, 254, 254, .6);
  -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.1);
  box-shadow: 0px 0 3px rgba(0,0,0,0.1);  
}

.priority-low{
    border-left:solid 10px green;
}
.priority-medium{
    border-left:solid 10px blue;
}
.priority-high{
    border-left:solid 10px red;
}