Post Its en CSS

Con CSS usando las propiedades para hace sombras se puede hacer un interesante efecto de Post Its.

Post Its en CSS:

HTML

<div class="paper">
  <p>Pila de papel :)</p>
</div>

CSS

body {
  font-family: Helvetica, sans-serif;
  font-size: 22px;
}
.paper {
  background: #f7d826;
  box-shadow:
    /* Shadow capa superior */ 0 1px 1px rgba(0, 0, 0, 0.15),
    /* Segunda capa */ 0 10px 0 -5px #f7d826,
    /* Segunda capa shadow */ 0 10px 1px -4px rgba(0, 0, 0, 0.15),
    /* Tercera capa */ 0 20px 0 -10px #f7d826,
    /* Tercera capa shadow */ 0 20px 1px -9px rgba(0, 0, 0, 0.15);
    /* Padding for demo purposes */
  padding: 30px;
  width: 200px;
  height: 200px;
}

Resultado:

Quieres conocer otro trucos en CSS? Aca te dejo los mas recientes:

• Efecto de maquina de escribir en CSS.
• Texto degradado en CSS.

Que tal el resultado? Genial ver todo lo que ahora podemos hacer con CSS…