Cómo hacer una línea del tiempo con HTML y CSS

Publicado el 1 Mayo, 2019, en: Tutoriales HTML & CSS

Hoy vamos a aprender cómo hacer una línea del tiempo con HTML y CSS. Este tutorial te va ayudar para ir practicando y comprendiendo algunos aspectos de CSS. En este caso vamos a hacer una línea del tiempo vertical.

Al final de los pasos, podrás ver el resultado final, acompañado del código HTML y CSS. Antes de empezar, quiero indicar que estaremos llamando momento a cada suceso en la línea del tiempo.

Paso 1: Crear la estructura HTML

Lo primero que debemos hacer es crear la estructura HTML para la línea del tiempo. En este caso, voy a utilizar un contenedor linea-tiempo, y dentro va un contenedor por cada momento. Dentro de cada momento, estará el encabezado h3 para el año y un contenedor para la descripción.

<div class="linea-tiempo">
  <div class="momento">
    <h3>2010</h3>
    <div class="descripcion">
      Poop on grasses fight an alligator and win and fight own tail.
    </div>
  </div>
  <div class="momento">
    <h3>2011</h3>
    <div class="descripcion">
      Poop on grasses fight an alligator and win and fight own tail.
    </div>
  </div>
  <div class="momento">
    <h3>2013</h3>
    <div class="descripcion">
      Poop on grasses fight an alligator and win and fight own tail.
    </div>
  </div>
  <div class="momento">
    <h3>2019</h3>
    <div class="descripcion">
      Poop on grasses fight an alligator and win and fight own tail.
    </div>
  </div>
</div>

Recuerda que puedes agregar más momentos o quitar, segun necesites.

Paso 2: Definir tamaños y posiciones

Ahora, procedemos a utilizar CSS para definir los tamaños y posiciones generales de cada contenedor.

En CSS, tenemos un selector increible que es el :nth-child. En este caso, usaremos .momento:nth-child(even) que selecciona cada elemento de clase ‘momento’ que es número par. Esto nos ayuda a aplicar diferentes estilos a los momentos de la izquierda y los de la derecha, para que vayan intercalando.

.linea-tiempo {
  position: relative;
  width: 500px;
  max-width: 95vw;
  height: 100%;
  font-family: Arial;
}

.momento {
  position: relative;
  width: 45%;
  box-sizing: border-box;
}

.momento:nth-child(even) {
  left: 55%;
}

Te explico lo que hemos hecho:

.linea-tiempo – Se ha aplicado un ancho de 500px, con un max-width de 95vw.
.momento – Se ha aplicado un ancho del 45%
.momento:nth-child(even) – Se ha posicionado los momentos pares (es decir, el 2do, 4to, 6to momento) a la derecha.

Leer más: Cómo funcionan las unidades vw de Viewport en CSS?

Paso 3: Crear la línea central y sus marcadores

Ahora, crearemos la línea central del tiempo y marcadores redondos, utilizando pseudo elementos en CSS. Esto nos facilita la estructura de HTML, porque no debemos crear más <div> para la línea y el marcador.

.linea-tiempo::before {
  content: '';
  position: absolute;
  width: 3px;
  background-color: #000;
  left: 50%;
  height: 100%;
  border-radius: 10px;
}

.momento::after {
  content: '';
  position: absolute;
  top: calc(50% + 10px);
  right: calc(-11.11% - 11.5px);
  height: 20px;
  width: 20px;
  background-color: #000;
  border-radius: 50%;
}

.momento:nth-child(even)::after {
  left: calc(-11.11% - 8.5px);
}

Te explico lo que hemos hecho:

.linea-tiempo::before – Se inserta contenido vacío que tiene un ancho de 3px, se posiciona al 50% del contenido y tiene fondo negro.
.momento::after – Se inserta contenido vacío de ancho 20px y altura 20px, con radio de borde del 50%, creando un círculo. Tiene fondo negro y se posiciona a la derecha de .momento. en el centro.
.momento:nth-child(even)::after – Se posiciona a la izquierda de .momento.

Hemos realizado cálculos para poder colocar los marcadores justo en la línea del centro. Esto tiene que ver con el ancho del .momento, el ancho de .linea-tiempo::before y el ancho del mismo marcador. Te recomiendo que experimentes cambiando el valor para que veas cómo afecta el resultado.

Leer más: ¿Qué son los pseudo elementos en CSS: :after y :before?

Paso 4: Personalizar los colores y formas

Hasta ahora tenemos la línea del tiempo creada. Debería verse algo así:

Se ve un poco aburrida, así que utilizaremos CSS para personalizarla a los colores y formas que deseamos.

.momento h3 {
  margin: 10px 0px;
  font-size: 30px;
  text-align: center;
}

.momento .descripcion {
  background-color: #eee;
  border-radius: 10px;
  padding: 10px;
  line-height: 22px;
  font-size: 14px;
}

.momento .descripcion::after {
  content: '';
  position: absolute;
  right: -10px;
  top: calc(50% + 10px);
  height: 0;
  width: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 12px solid #eee;
}

.momento:nth-child(even) .descripcion {
  background-color: #3393FE;
  color: white;
}

.momento:nth-child(even) .descripcion::after{
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid #3393FE;
  border-left: none;
}

Te explico lo que hemos hecho:

.momento h3 – Alineamos el año al centro y le ponemos tamaño 30px.
.momento .descripcion – Le ponemos fondo gris, letra tamaño 14px y bordes redondeados a 10px.
.momento .descripcion::after – Se inserta contenido vacío a la derecha de .descripción y centrado, con forma de triángulo.
.momento:nth-child(even) .descripcion – A los momentos de la derecha, le ponemos fondo celeste y letra blanca.
.momento:nth-child(even) .descripcion::after – El contenido vacío, se coloca a la izquierda y de color celeste para los momentos de la derecha.

Se han realizado cálculos para posicionar el triángulo justo al centro del texto, tomando en cuenta el padding de .descripcion. Te recomiendo jugar con los números para que veas cómo varía la posición.

Resultado: Línea del tiempo con HTML y CSS

A continuación, te dejo el resultado final, con todos los códigos utilizados. Recuerda que puedes ir variando los colores, tamaños y formas, como gustes.

Déjanos en los comentarios si tienes alguna duda. Por cierto, si estás un poco confundido sobre el texto en la línea del tiempo, te cuento que se trata de Cat Ipsum.