Create a sticky note using CSS3

CSS3 brought to Web 2.0 an entire new way to use visual effects and finally stop using images. One of the great CSS3 features are definitely, shadows, rotation and transparency. By simply using these three effects you can create almost anything that requires images.

Here's a quick example for sticky notes:

In order to create this realistic sticky note, you will need this simple CSS3 code:

CSS

.stickynotes {
  position: relative;
  width: 300px;
  min-height: 100px;
  margin: 25px auto;
  padding: 35px 15px 15px 15px
  background: #F8EFA2;
  -webkit-transform: rotate(-.8deg);
  -moz-transform: rotate(-.8deg);
  -o-transform: rotate(-.8deg);
  -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
  -moz-box-shadow: 0 2px 12px (rgba(0,0,0.5));
  box-shadow: 0 1px 2px #000;
}

.stickynotes span {
  display: block;
  text-align: center;
  font: normal 36px Tahoma;
  color: #000;
  text-shadow: white 1px 1px 0px;
  overflow:hidden;
}

.stickynotes span::before {
  content: ' ';
  display: block;
  position: absolute;
  left: 115px;
  top: -15px;
  width: 75px;
  height: 25px;
  z-index: 2;
  background: rgba(245,245,245,0.5);
  border: 2px solid rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 0 5px #888;
  -moz-box-shadow: 0 0 5px #888;
  box-shadow: 2px 2px 2px #000;
  -webkit-transform: rotate(6deg);
  -moz-transform: rotate(6deg);
  -o-transform: rotate(6deg);
}

HTML

<div class="stickynotes"><span>Don't forget this!</span></div>

Way easier than creating images right?