Gracias al posicionamiento mediante CSS es posible controlar el lugar donde aparecerá cada uno de los elementos de nuestras páginas en la pantalla de los visitantes. Si bien con propiedades como float es posible acomodar con facilidad cada capa en un costado de la pantalla, hay una propiedad muy interesante que nos permite superponer distintos contenidos entre sí y de esta forma lograr un complejo efecto visual sobre animaciones, imágenes u otro tipo de contenidos que queramos desplegar.

Es por eso que hoy, en un nuevo tutorial que les trae CLH, estaremos viendo en detalle la propiedad z-index de CSS, la cual nos permite lograr lo antes descrito.

El detalle, como siempre, después del salto.

Cómo superponer contenido sobre una animación en Flash

Si bien lo que veremos hoy es bastante más generalizado que ‘Superponer contenido sobre una animación en Flash’, hemos decidido denominarlo de esa forma ya que es uno de los problemas más comunes que llevan a la profundización de esta propiedad. Sin embargo, lo expuesto hoy puede aplicarse para todo tipo de contenido, incluyendo imágenes, textos o menús de navegación entre otras cosas.

Con eso claro, vamos con lo primero:

Implementos necesarios:

1. Opcionalmente un editor Web. De cualquier forma de no utilizar alguno, se puede realizar el procedimiento mediante bloc de notas.

Antes de entrar de lleno al procedimiento, es bueno hacer una aclaración de conceptos. Como mencionábamos en la introducción de este tutorial, estaremos hablando de y trabajando con la propiedad z-index de CSS. Así que para los curiosos (como Topher) y los preguntones (como Dexter):

¿Qué es z-index?

La pregunta de la olla millonaria de caldos mag.. sin propaganda mejor clave de todo este asunto. Si nos remontamos a épocas antiguas, por alla por los tiempos estudiantiles de cada uno y hacemos un pequeño repaso por matemáticas, o más especificamente geometría análitica, es posible recordar aquellos temibles contenidos sobre el plano cartesiano, rectas, pendientes y demases.

Si hacemos más memoria aún, recordaremos que un factor común de esos contenidos era cuando nos hablaban sobre los puntos en el espacio y los ejes a los que pertenecían. Esos ejes, al menos en ese momento, eran principalmente 2: el eje x, el cual representaba la horizontalidad y el eje y, el cual representaba la verticalidad. Para los que le hayan hecho la cruz a la geometría posterior a eso.. (la cruz.. intersección de 2 puntos.. humor matemático y juego de palabras, que lindo ¿no?) y se hayan perdido el resto de la historia, existe además un tercer eje, el cual es conocido como eje z y representa la profundidad en el espacio. Esto se relaciona directamente a las 3 dimensiones en las que vivimos y vemos los seres humanos: horizontal (x), vertical (y), profundidad (z). Esta es la parte donde todos decimos “Oooohhhh” al ver como todo está conectado entre sí.

Computacionalmente el asunto no es muy diferente. La pantalla en donde vemos todo tipo de contenidos, desde recursos multimedia, archivos, aplicaciones, juegos, etc. opera con la lógica del plano, teniendo un eje horizontal y uno vertical, los cuales son representados por las resoluciones de pantalla (por ej. al hablar de una resolución de 1024×768 pixeles, estamos diciendo que en la pantalla vemos 1024 pixeles horizontalmente y 768 de forma vertical). A su vez acá también tenemos un plano z de profundidad, el cual si bien a simple vista no notamos, si existe. La mejor prueba para notarlo es ver que al momento de abrir una aplicación, el escritorio no desaparece, solo queda parcial o totalmente oculto por el nuevo contenido que se superpuso.

En diseño Web, o más especificamente en CSS, podemos manejar el tema de las profundidades de los contenidos que estamos desplegando. Esto lo hacemos mediante la propiedad z-index, la cual se encarga de asignar una posición de profundidad a cada contenido de acuerdo al valor que le demos. A mayor valor asignado a esta propiedad para un contenido, se irá superponiendo a cada contenido restante que tenga un valor menor. Al final, todos los contenidos irán formando una pila, de menor a mayor.

Para que un elemento pueda hacer uso de la propiedad z-index, debe siempre estar posicionado, ya sea absoluta o relativamente. Si el elemento no está posicionado, no podrá usarse la propiedad. Adicionalmente, si 2 elementos comparten el mismo z-index se posicionarán de acuerdo al orden que le hayamos dado en el documento HTML.

Con esa larga explicación lista, podemos empezar a trabajar en nuestro proyecto de hoy y ver como resulta todo:

Procedimiento:

Lo que haremos hoy será bastante simple. Crearemos un documento HTML en donde añadiremos un pequeño encabezado, el cual estará compuesto de una animación flash (en el fondo) y una barra en imagen (superpuesta a la animación) para luego insertar un menú de navegación. Junto a eso añadiremos un pequeño botón como detalle. Este botón podrá ser manipulado tal como si fuese una imagen normal, es decir, añadiéndole un enlace total o por mapa, viendo sus propiedades, copiando la ruta, etc. Lo mismo corre para el menú de navegación.

Entonces basicamente contaremos con 3 capas: una para la animación, otra para nuestra barra y menú de navegación y finalmente una que irá sobre todas las anteriores con el botón.

1.- Utilizaremos los siguientes elementos:

Una animación de fondo:

Un botón (para hacer botones, los invitamos a revisar este tutorial donde hemos cubierto el proceso por completo):

Y adicionalmente hemos creado una barra de color blanco (la cual por razones obvias no pondremos acá) de 1×60 px, la cual montaremos sobre la animación y modificaremos vía CSS.

Para no extender en demasía este tutorial, el menú de navegación lo incluiremos como texto plano, con el fin de ubicar donde iría el código final y como se posiciona en términos de profundidad con respecto a los otros elementos. Empezar a hacer el menú desde cero acá probablemente nos llevaría un buen rato y lo hemos visto en otros tutoriales, así que lo haremos de esta forma.

2.- Con nuestros elementos listos, prepararemos nuestro CSS, el cual definirá las propiedades a aplicar a cada parte del contenido:

body{
margin: 0;
}

#uno{
position: absolute;
z-index: 1;
width:100%;
}

#dos{
position: absolute;
z-index: 2;
background-image: url(barra.png);
background-repeat: repeat;
width: 100%;
height: 60px;
opacity: .50;
-moz-opacity: .50;
filter: alpha(opacity=50);
margin-top: 10px;
font-weight: bold;
text-indent:20px;
}

#tres{
position:absolute;
z-index: 3;
margin-left:450px;
}

Entonces ordenemos el cuento:

• Cada id declarado (uno, dos y tres) corresponden a uno de los elementos que agregaremos (animación en el uno, barra y menú de navegación en el dos y botón en el tres). Los tres han sido posicionados de forma absoluta y se les ha asignado un z-index correlativo con el fin de que la animación salga al fondo, sobre ella la barra y el menú de navegación y sobre todos ellos el botón.
• A su vez, la barra se ha agregado como fondo en el id dos, con el fin de escribir el texto sobre esta imagen de fondo y así poder aprovechar una imagen pequeña (1×60 px) y repetirla a lo largo del encabezado.
• Adicionalmente hemos utilizado las propiedades opacity, -moz-opacity y filter para agregar transparencia a la barra y que no se vea solida en blanco, si no que nos permita ver el resto de la animación que está en el fondo.
• Todo lo demás lo hemos acomodado mediante márgenes e indentaciones de texto para acomodar de acuerdo al diseño que teníamos en mente.

Ahora ojo, hemos hecho todos los posicionamientos con medidas fijas en pixeles, para efectos de demostración. Al momento de hacer diseños definitivos es bueno adaptarse a como se ha diseñado el sitio completo, especialmente si son diseños líquidos cuyas medidas están en porcentajes.

3.- Con el CSS listo, ahora crearemos un archivo HTML, en donde insertaremos div’s con el respectivo contenido, los cuales tomarán propiedades del CSS y se posicionarán como lo teníamos pensado originalmente. Entonces:

<html>
<head>
<title>Ejemplo de superposicion</title>
<link href="estilo.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="uno">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=7,0,19,0" width="700" height="157">
<param name="movie" value="fondo.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed wmode="transparent" src="fondo.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" width="700" height="157"></embed>
</object>
</div>
<div id="dos"><h2>Inicio | Quienes Somos | Contacto</h2></div>
<div id="tres"><img src="boton.png" /></div>
</body>
</html>

Guardamos todo y vemos en nuestro navegador favorito para observar el resultado final:

Como podemos ver en la imagen anterior, tenemos nuestra animación hecha en Flash en el fondo. Sobre ella se ha agregado la barra que creamos (repetida y con la opacidad alterada vía CSS). Sobre la barra nuestro menú de navegación y sobre todo ello el botón. Se ha ordenado tal como los valores que hemos dado a cada z-index.

Simple ¿no?. Así que en resumen:

¿Qué hemos aprendido hoy?

• Mediante z-index podemos manejar la profundidad de varios elementos, aún cuando compartan el mismo espacio físico.
• Para utilizar z-index, debemos posicionar los elementos de forma relativa o absoluta.
• 2 elementos pueden compartir el mismo z-index y serán mostrados de acuerdo al orden que se agregan.
• Podemos superponer todo tipo de contenidos, así que a animarse y probar.
• La geometría analítica está relacionada a como vemos y vivimos los humanos, y todo eso a como se grabó Avatar.

Y con eso damos todo por terminado hoy, recordándoles que como siempre, este tutorial ha sido:

Cualquier duda o comentario que tengan, no sean tímidos, los invitamos a dejarnos unas líneas a continuación. Somos buena onda para responder, lo prometemos 🙂

Esperamos que este tutorial haya sido de utilidad para Uds.

Muchas gracias por leer y será hasta una próxima oportunidad.