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:
Que tal el resultado? Genial ver todo lo que ahora podemos hacer con CSS…