Unidad 7. Ejercicio paso a paso: Texto en 3D

Objetivo

Utilizando el posicionamiento absoluto, vamos a crear un título dando volumen a un texto plano:

La idea es simple, repetir varias veces un texto en un mismo punto de origen, y desplazar un poco cada repetición.

Ejercicio

Crea una nueva página, con todos sus elementos: Doctype, head, body...

1 Crea las siguientes divisiones, cambiando Hola mundo por el texto que prefieras:

<div class="titulo">
 <div class="efecto5">Hola mundo</div>
 <div class="efecto4">Hola mundo</div>
 <div class="efecto3">Hola mundo</div>
 <div class="efecto2">Hola mundo</div>
 <div class="efecto1">Hola mundo</div>
 <div class="frontal">Hola mundo</div>
</div>

El orden es importante, porque el último elemento se situará delante del resto. De todas formas, siempre podemos controlar el orden con la propiedad z-index.

2 Todo está anidado dentro del div.titulo. Así que será a éste al que definamos el formato del texto del título. También le daremos un tamaño (height y width), ya que los div de dentro serán absolutos, y si no aparecería como si no tuviese contenido. Y por eso mismo, para que los div de dentro tomen su posición a partir del div.titulo debemos de darle algún tipo de posicionamiento distinto de static. Vamos a utilizar position:relative; ya que realmente no afecta a la posición si no definimos la posición, pero podríamos haberlo posicionado, por ejemplo, de forma absoluta.

Define el siguiente estilo, cambiando si lo prefieres el formato del texto:

div.titulo {
   position: relative;
   font-family: sans-serif;
   font-size: 3em;
   font-weight: bold;
   width: 7em;
   height: 1.5em;
  }

2 Cuando tenemos muchos elementos con propiedades comunes, es útil definirlos todos a la vez, en este caso el posicionamiento position: absolute; y el color que comparten casi todos los divs, el de la profundidad.

Define el estilo div.titulo div { position: absolute; color:#333399;}

3 Por el orden en que los hemos colocado, el de la clase frontal es el que estará delante de todo. Éste lo colocamos en la esquina superior izquierda (left:0; top:0;) del div.titulo. También le daremos un color al texto distinto.

Define el estilo div.titulo .frontal { color: #3366FF; top: 0; left:0; }.

4 Al resto, no tenemos más que, siguiendo el orden, ir alejándolos un poco más de la esquina superior izquierda.

Define los estilos:

div.titulo .efecto1 {
 top:1px;
 left:1px;
}
div.titulo .efecto2 {
 top:2px;
 left:2px;
}
div.titulo .efecto3 {
 top:3px;
 left:3px;
}
div.titulo .efecto4 {
 top:4px;
 left:4px;
}
div.titulo .efecto5 {
 top:5px;
 left:5px;
}

Puedes probar a cambiar cosas, como añadir bordes, producir un oscurecimiento gradual, dando un color cada vez más oscuro a las capas, etc...