Foros del Web » Creando para Internet » CSS »

¿Cómo hacer este efecto de postit parcialmente despegado?

Estas en el tema de ¿Cómo hacer este efecto de postit parcialmente despegado? en el foro de CSS en Foros del Web. Hola, en la siguiente web de postits personales hay un efecto en la parte de abajo de los postits como de medio despegado que no ...
  #1 (permalink)  
Antiguo 06/10/2010, 10:04
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
¿Cómo hacer este efecto de postit parcialmente despegado?

Hola, en la siguiente web de postits personales hay un efecto en la parte de abajo
de los postits como de medio despegado que no consigo entender cómo está hecho. He mirado el css con el firebug pero no lo pillo.

http://listhings.com/

¿alguien lo sabe?

Saludos.
  #2 (permalink)  
Antiguo 06/10/2010, 12:09
 
Fecha de Ingreso: marzo-2010
Mensajes: 21
Antigüedad: 7 años, 9 meses
Puntos: 0
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

E mirado la pagina pero no encuentro eso que dices...:S... me sale el postit normal, de todas formas seguramente sea una imagen echa con photoshop, ah!! y dime como se muestra medio despegado!!!
  #3 (permalink)  
Antiguo 06/10/2010, 12:45
Avatar de chichote
Colaborador
 
Fecha de Ingreso: diciembre-2004
Ubicación: Santiago - Chile
Mensajes: 1.868
Antigüedad: 13 años
Puntos: 145
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

a q efecto te refieres? al hover? a la separacion con el fondo? cual es ese efecto q mencionas?

saludos
__________________
http://chicho.ninja yiaaaa
  #4 (permalink)  
Antiguo 06/10/2010, 13:31
Avatar de iconogt  
Fecha de Ingreso: septiembre-2004
Ubicación: Guatemala
Mensajes: 573
Antigüedad: 13 años, 3 meses
Puntos: 4
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Creo que el se refiere al posicionamiento de los botones en la parte inferior izquierda, imagino..
__________________
_______
Jorge Rojas.
  #5 (permalink)  
Antiguo 07/10/2010, 02:56
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

!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!
  #6 (permalink)  
Antiguo 07/10/2010, 09:20
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Amigo, eso es una imagen debajo, en (supongo) .png con canal alfa (transparencia).

Se hace muy facil, es un div debajo del de arriba y este div tiene de background la imagen.
  #7 (permalink)  
Antiguo 07/10/2010, 12:29
 
Fecha de Ingreso: agosto-2009
Mensajes: 78
Antigüedad: 8 años, 3 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
  #8 (permalink)  
Antiguo 07/10/2010, 13:48
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Aun asi, hay una forma mas sencilla de hacerlo, daros cuenta que ese es un documento muy "raro".
Tal como lo dije yo, lo consiges sin problemas (en mi web lo utilizo siempre para mis imagenes)

Cita:
De aqui puedes tomar la imagen
http:// listhings.com/ i/s-right. png

Quita los espacios del enlace
Son dos enlaces, el derecho:
http://listhings.com/i/s-right.png
el izquierdo:
http://listhings.com/i/s-left.png

Pero repito esto lo hace mas lioso de lo que es en realidad.
  #9 (permalink)  
Antiguo 08/10/2010, 02:25
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Cita:
Iniciado por wilo087 Ver Mensaje
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

Muchas gracias wil. Lo he probado y no me acaba de quedar bien, pero entiendo la idea. Y yo que pensaba que sería alguna virgueria nueva de CSS3 o algo así.

Gracias por vuestras respuestas a todos!
  #10 (permalink)  
Antiguo 08/10/2010, 09:19
 
Fecha de Ingreso: agosto-2009
Mensajes: 78
Antigüedad: 8 años, 3 meses
Puntos: 2
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Cita:
Iniciado por mariomon17 Ver Mensaje
Aun asi, hay una forma mas sencilla de hacerlo, daros cuenta que ese es un documento muy "raro".
Tal como lo dije yo, lo consiges sin problemas (en mi web lo utilizo siempre para mis imagenes)


Son dos enlaces, el derecho:
http://listhings.com/i/s-right.png
el izquierdo:
http://listhings.com/i/s-left.png

Pero repito esto lo hace mas lioso de lo que es en realidad.

Tienes toda la razon, hay formas de hacer esto mucho mas facil simplemente con una sola imagen, puse esto solo como una referencia para que vea como estaba hecho.

Luego voy a ver si hago un pequeño tuto sopre como hacer esto
  #11 (permalink)  
Antiguo 11/10/2010, 02:00
 
Fecha de Ingreso: mayo-2010
Mensajes: 60
Antigüedad: 7 años, 6 meses
Puntos: 1
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Cita:
Iniciado por mariomon17 Ver Mensaje
Aun asi, hay una forma mas sencilla de hacerlo, daros cuenta que ese es un documento muy "raro".
Tal como lo dije yo, lo consiges sin problemas (en mi web lo utilizo siempre para mis imagenes)


Son dos enlaces, el derecho:
[url]http://listhings.com/i/s-right.png[/url]
el izquierdo:
[url]http://listhings.com/i/s-left.png[/url]

Pero repito esto lo hace mas lioso de lo que es en realidad.
Hola. En esa página web está hecho de esa forma más complicada porque se le puede cambiar el tamaño a los postits. Por lo que en tiempo real van cambiando esos atributos CSS de tamaño, posición relativa etc. Supongo que en una imágen fija es más fácil.

Saludos!
  #12 (permalink)  
Antiguo 11/10/2010, 09:03
 
Fecha de Ingreso: noviembre-2009
Mensajes: 846
Antigüedad: 8 años, 1 mes
Puntos: 34
Respuesta: ¿Cómo hacer este efecto de postit parcialmente despegado?

Si es muy sencillo. Creas dos div's: el que tiene el postip y otro el que tiene la sombra (creada con canal alfa[.png] para que sea transparente) y pones el div con la sobra debajo del otro.
Entendisteis?

Etiquetas: efecto
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 17:14.