Ejemplos de webs con capas absolutas y fijas

Diseño Web, Html Dejar un comentario

Las capas es el sistema de maquetación que mayoritariamente utilizan los desarrolladores de páginas web. La maquetación con capas estáticas y relativas son las que más se usan, pero en este ejemplo del Sistema Solar, se muestra el funcionamiento de las capas absolutas (los planetas) y las fijas (la nave).

Sistema solar con DIV absolutos y fijos
Ver web del sistema solar | descargar web espacio.ZIP 242 Kb

Al poder trabajar con el eje Z (profundidad) se puede decidir si la nave pasa por encima o debajo, con el valor de la etiqueta z-index, que en la capa cohete es 1, por lo que está debajo de las demás.

Para sacar el máximo partido al efecto de deslizarte con el dedo en tablets y smartphones, he definido una etiqueta META viewport que impide hacer zoom en muchos dispositivos. Tienes la hoja de estilo embebida en el código html para que puedas modificar el documento más fácilmente y hacer pruebas cambiando los parámetros de las etiquetas CSS.

Otros ejemplos, realizados por los alumnos:

DIV absolutos y fijos DIV absolutos y fijos DIV absolutos y fijos DIV absolutos y fijos

  • Conéctate con tus raíces (por Miriam Barahona)
  • Bajo el mar (por Ángel)
  • Viva San Fermín (por @CarlosCrespoGon)
  • San Valentín (por Roberto Carro)
  • Blog Widget by LinkWithin
    ¿Te gustó?, VOTA el post. SÍGUEME por Twitter, Facebook o RSS.

    Sigue leyendo:

    Un Trackback

    2 Comentarios

    1. Gravatar 13 febrero 2013, 10:39
      Ángel: Reply to this comment

      Pancho, gracias por incluir mi ejemplo entre los excelentes trabajos de mis compañeros.
      Como diría el rey; me llena de orgullo y satisfacción… :D

    2. Gravatar 14 febrero 2013, 6:40
      Pancho opcionweb: Reply to this comment

      El placer es todo mio :-)
      Es un privilegio ser testigo y parte de la progresión que estas teniendo. Un saludo.

    Escribe tu comentario o... ¡salta!

    Etiquetas XHTML permitidas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

    
    Entradas RSS Comentarios RSS Acceder Subir
    twitter facebook Rss mail rssSígueme en Google Currents