Ver Mensaje Individual
  #7 (permalink)  
Antiguo 07/10/2010, 11:29
wilo087
 
Fecha de Ingreso: agosto-2009
Mensajes: 78
Antigüedad: 14 años, 7 meses
Puntos: 2
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Cita:
Iniciado por Washby Ver Mensaje
!Vaya, parece que me he explicado mal porque nadie me ha entendido!

Aunque también acabo de comprobar que el efecto que digo no se ve bien en el explorer, en cambio en firefox si. Supongo que ese será el problema.

A lo que me refiero es la sombra que hay debajo de cada postit que hace que parece que esté despegado del corcho de fondo, anexo una imagen con una flecha al efecto.



Diria que no es un efecto hecho con photoshop. La imagen de fondo amarilla en degradado sí que es una imagen "delgada" que se repite las veces necesarias, pero el efecto ese no (o al menos no lo he encontrado mirando el CSS). Y además si fuera una imagen se veria bien en el explorer, por lo que supongo que debe ser algo de CSS3.

Saludos!
Son dos imagenes con dos etiquetas span. aqui te abjunto el codigo y las imagenes

Código:
.shadow {
height:212px;
left:729px;
opacity:1;
position:absolute;
top:239px;
width:250px;
z-index:917;
}


.shadow .l {
background:url("/i/s-left.png") no-repeat scroll left bottom transparent;
bottom:0;
display:block;
height:30px;
left:0;
position:absolute;
width:50%;
}

.shadow .r {
background:url("/i/s-right.png") no-repeat scroll right bottom transparent;
bottom:0;
display:block;
height:30px;
position:absolute;
right:0;
width:50%;
}


<div class='shadow'>
<span class="l"></span>
<span class="r"></span>
</div>
De aqui puedes tomar la imagen
http:// listhings.com/ i/s-right. png

Quita los espacios del enlace