CSS Sticky Notes

This is another fun trick using :before and :after CSS pseudo-classes that I used when doing the this product page on Balsamiq.com. We wanted to call out people's attention in a secondary call to action near the middle of the screen, so I ended up creating boxes that looked like sticky notes—really they're taped pieces of paper in my example—with highlighted text and links in them. Here's how I did it.

The technique is simple. You add a .sticky class to a paragraph or any other block element. In the stylesheet you add an :after rule that positions a div above the paragraph and style it to look like a piece of tape. On the Balsamiq site, I used an image to create the tape effect shown in the first example below, but the second example shows how you could do it with CSS only. You can probably go a little further and gradients, but I want to keep things simple here. So let's take a look.


Using an image to create the tape

This uses an image for the tape.

Demo

The Little Turtle.
There was a little turtle.
He lived in a box.
He swam in a puddle.
He climbed on the rocks.
—Vachel Lindsay

Code

Feel free to download the tape image if you want it, but don't reference the image url on my site in your CSS.


<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>

.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;
}



Using CSS to create the tape effect

This technique uses the same .sticky class, but the added .taped2:after CSS below to create the tape without an image.

Demo

The Little Turtle.
There was a little turtle.
He lived in a box.
He swam in a puddle.
He climbed on the rocks.
—Vachel Lindsay

Code


<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>

.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);  
}