Notitas con CSS3

JMiur

Esta es una forma original de colocar papelitos con notas en una entrada cualquiera empleando sólo CSS3 así que en Internet Explorer el resultado es limitado ya que usa algunas propeidades que ese navegador aún no interpreta; de todo modos, el HTML es un simple DIV con una clase definida como notes.

<div id="notes">
  <div>

    <p> el titulo </p>
    <span> ... el contenido ... </span>
  </div>
</div>

Y ahora el estilo que es lo fundamental y que podemos adaptar a gusto porque las posibilidades son muchas:

<style>

#notes { /* el ancho de la nota */
  width: 200px;
}
#notes div { /* el div interior con el contenido */
  background: #FFEA6F url(UNA_IMAGEN) no-repeat 5px 10px;
  min-height: 200px;
  position: relative;
  -moz-box-shadow: 3px 3px 5px #FFB;
  -webkit-box-shadow: 3px 3px 5px #FFB;
  box-shadow: 3px 3px 5px #FFB;
  -moz-border-radius:4px 0 0 4px;
}
#notes div p { /* el título */
  color: #85BF20;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 28px;
  height: 65px;
  overflow: hidden;
  padding: 20px 0 0 85px;
  text-shadow: 2px 2px 1px #000;
}
#notes div span { /* el texto con el contenido */
  color: #000;
  display: block;
  font-size: 12px;
  line-height: 1.3em;
  padding: 0 10px 10px;
  text-align: center;
}
/* y esta es la cinta con que pegamos la notita  */
#notes div::before {
  background-color: rgba(255, 255, 255, 0.5);
  border: 2px solid rgba(0, 100, 0, 0.5);
  content: ' ';
  display: block;
  position: absolute;
  left: 80px;
  top: -15px;
  width: 60px;
  height: 30px;
  z-index: 2;
  -moz-box-shadow: 0 0 5px #404951;
  -webkit-box-shadow: 0 0 5px #404951;
  box-shadow: 0 0 5px #404951;
  -moz-transform: rotate(-6deg);
  -webkit-transform: rotate(-6deg);
  -o-transform: rotate(-6deg);
}
</style>

mis notas

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Nam fringilla dictum iaculis. Suspendisse nec nisl urna. Vivamus placerat sollicitudin congue.

Fusce nec magna iaculis odio pretium suscipit nec porttitor ante. Praesent mollis; est in auctor iaculis; lorem dolor sodales lectus, a faucibus sem elit sit amet dui.

Ut eget velit ut odio convallis ultricies. Cras eu sem quis justo interdum ultrices a et enim.

REFERENCIAS:accidental hacker