Foros del Web » Creando para Internet » HTML »

¿Cómo diablos se hace esto? ¿CSS?

Estas en el tema de ¿Cómo diablos se hace esto? ¿CSS? en el foro de HTML en Foros del Web. Hola a todos. Hace tiempo que no pasaba por acá. Vi una página que me dejó muy asombrado. La URL es: http://www.csszengarden.com/?cssfile...n/zenocean.css Me gustaría ver ...
  #1 (permalink)  
Antiguo 12/01/2005, 00:18
Avatar de Chuqui  
Fecha de Ingreso: diciembre-2001
Ubicación: Santiago, Chile
Mensajes: 149
Antigüedad: 16 años
Puntos: 3
Pregunta ¿Cómo diablos se hace esto? ¿CSS?

Hola a todos. Hace tiempo que no pasaba por acá. Vi una página que me dejó muy asombrado. La URL es:

http://www.csszengarden.com/?cssfile...n/zenocean.css

Me gustaría ver si alguien me puede explicar cómo se hacen esos efectos especiales... el del buzo, las burbujas, el cofre, etc., ya que no son ni GIF animados, ni Flash, ni Javascript ni nada de eso...



__________________
Si la vida te da la espalda, agárrale el culo!
  #2 (permalink)  
Antiguo 12/01/2005, 02:09
Avatar de kemie  
Fecha de Ingreso: junio-2003
Ubicación: estocolmo<-->mexico
Mensajes: 1.627
Antigüedad: 14 años, 5 meses
Puntos: 1
las burbujas y el cofre si son gifs animados, utilizados como fondos de elementos mediante css. el buzo esta hecho con un png con transparencia de 32 bits
__________________
::::::::::::::::::::::::::::: WebHostNinja | diseñorama.com::::::::::::::::::::::::::::::
  #3 (permalink)  
Antiguo 12/01/2005, 09:41
 
Fecha de Ingreso: diciembre-2003
Mensajes: 1.583
Antigüedad: 14 años
Puntos: 13
Para el efecto de las burbujas se utiliza un gif animado como fondo, asignado con CSS en el estado HOVER de algunos divs, por ejemplo:

#explanation:hover {
background: url(blubba6.gif) no-repeat 40px 0;
}

El tema del buzo con la linterna es un juego de capas.

Tienes un div (#extraDiv3) que tiene la linterna (png) como imagen de fondo, al div le han dado una posicion fija (fixed), y un z-index:8

Para el buzo, han puesto un div (#extraDiv2) que tiene al buzo (png) como imagen de fondo. A este div le han dado la misma ubicacion que el div de lal ibnterna, pero con un z-index:10;

Por ultimo, el efecto d elal interna que se va apagando gradualmente a medida que quedan mas cerca de la superficie del mar.
Han puesto un div (#extraDiv4) con un z-index:9 para que quedara entremedio de los dos divs anteriores. La imagen de este div es una franja vertical con una degradacion con transparencia. Este div no tiene una posicion fija, por lo que se mueve segun el movimiento del scroll.

Gracias a este movimiento, y que el buzo con la linterna quedan fijos, es que la franja vertical va tapando la linterna de acuerdo al grado de transparencia del degradé.


Revisa el archivo css y fijate en los estilos para #extraDiv2, #extraDiv3 y #extraDiv4
__________________
El conocimiento es libre: Movimiento por la Devolución
  #4 (permalink)  
Antiguo 13/01/2005, 14:32
Avatar de Chuqui  
Fecha de Ingreso: diciembre-2001
Ubicación: Santiago, Chile
Mensajes: 149
Antigüedad: 16 años
Puntos: 3
Muchas, muchas, muchas gracias!
__________________
Si la vida te da la espalda, agárrale el culo!
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 13:52.