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

[Chuqui]

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...

[kemie]

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

[frijolerou]

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

[Chuqui]

Muchas, muchas, muchas gracias!