Foros del Web » Creando para Internet » CSS »

Como lograr este efecto?

Estas en el tema de Como lograr este efecto? en el foro de CSS en Foros del Web. Buenas compañeros! Me preguntaba como esta hecho este efecto de esta pagina?¿? http://www.moodboard.com/gallery/index.htm Fijaras cuando le clicáis en el botón de arriba SIGN IN. Que ...
  #1 (permalink)  
Antiguo 23/03/2008, 16:08
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Como lograr este efecto?

Buenas compañeros!

Me preguntaba como esta hecho este efecto de esta pagina?¿?

http://www.moodboard.com/gallery/index.htm

Fijaras cuando le clicáis en el botón de arriba SIGN IN.

Que os aparece una barra arriba de la pantalla para logearte, como se logra ese efecto?.

Gracias de antemano
  #2 (permalink)  
Antiguo 23/03/2008, 16:49
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: Como lograr este efecto?

Seguramente tendrán un div, por ejemplo llamado oculto, con la propiedad display: none, que cuando pinchas se hará display: block.

Algo así:
Código:
#oculto{ display: none}
Código HTML:
<div id="oculto">Tu contenido</div>
<a href="#" onclick="document.getElementById('oculto').style.display = 'block'">Enlace</a> 
  #3 (permalink)  
Antiguo 23/03/2008, 17:12
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Como lograr este efecto?

Cita:
Iniciado por Raulmmmm Ver Mensaje
Seguramente tendrán un div, por ejemplo llamado oculto, con la propiedad display: none, que cuando pinchas se hará display: block.

Algo así:
Código:
#oculto{ display: none}
Código HTML:
<div id="oculto">Tu contenido</div>
<a href="#" onclick="document.getElementById('oculto').style.display = 'block'">Enlace</a> 
Pero si te fijas, cuando vuelves a pulsar se vuelve a esconder!

Es posible que sea AJAX? se puede hacer en CSS?

Si se consiguiera ocultar la capa esa igual que la muestras, sería posible...

Pero desconozco como mostrar algo y que pulsando el mismo botón se vuelva a esconder!

Alguién sabe?

Gracias
  #4 (permalink)  
Antiguo 23/03/2008, 17:12
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 9 años, 10 meses
Puntos: 845
Re: Como lograr este efecto?

a ver si te sirve este enlace

http://www.dustindiaz.com/seven-togglers/

salu2.

PD: neodi te puse un ejemplo en tu post.
  #5 (permalink)  
Antiguo 23/03/2008, 17:16
Avatar de juaniquillo
Colaborador
 
Fecha de Ingreso: noviembre-2005
Ubicación: San Juan, Puerto Rico
Mensajes: 5.745
Antigüedad: 12 años
Puntos: 281
Re: Como lograr este efecto?

no es ajax, es simple javascirpt. En la página de codeigniter tienen el mismo efecto pero animado:

http://codeigniter.com/user_guide/

si le das click donde dice "table of content" lo puedes ver. En este caso se usa mootools.
__________________
Por fin.. tengo algo parecido a un blog
Y por lo visto ya estoy escribiendo...
  #6 (permalink)  
Antiguo 23/03/2008, 18:12
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Re: Como lograr este efecto?

Cita:
Iniciado por juaniquillo Ver Mensaje
no es ajax, es simple javascirpt. En la página de codeigniter tienen el mismo efecto pero animado:

http://codeigniter.com/user_guide/

si le das click donde dice "table of content" lo puedes ver. En este caso se usa mootools.
Gracias a los dos, le echaré un vistazo!
  #7 (permalink)  
Antiguo 23/03/2008, 21:26
Colaborador
 
Fecha de Ingreso: diciembre-2005
Mensajes: 2.899
Antigüedad: 12 años
Puntos: 281
Re: Como lograr este efecto?

El efecto que comentas esta muy bien, pero a mi me gusta la parte inferior, digamos el pie, que se queda fijo, y por encima de la otra capa.
Me gustaría si alguien puede decirme como conseguir eso.

gracias
__________________
Diseño y posicionamiento de paginas web Diseñador web freelance
Sigueme en Google Plus
  #8 (permalink)  
Antiguo 23/03/2008, 22:24
Avatar de masterpuppet
Software Craftsman
 
Fecha de Ingreso: enero-2008
Ubicación: Montevideo, Uruguay
Mensajes: 3.550
Antigüedad: 9 años, 10 meses
Puntos: 845
Re: Como lograr este efecto?

el efecto es drag&drop te dejo un link
http://demos.mootools.net/Drag.Cart
salu2
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 23:39.