Cómo Crear una Línea de Tiempo (Timeline) con HTML y CSS

Diseñar una linea de tiempo con css requiere del dominio de Hojas de Estilos no muy avanzado, pero que si conozcas las propiedades de trabajar con Pseudoclases

Una línea de tiempo es un recurso visual muy útil para mostrar eventos de forma cronológica. Es común en presentaciones de proyectos, portafolios o para visualizar procesos en páginas web. Hoy te enseñaremos a crear una línea de tiempo moderna utilizando solo HTML y CSS, sin necesidad de frameworks ni JavaScript complejo.

🎯 ¿Qué necesitas saber?

Para este proyecto no necesitas ser un experto, pero sí es importante que domines:

• Selectores de CSS
• Pseudoclases como :before y :after
• Responsive design con media queries

Crear una Línea de Tiempo con CSS

Buscas crear una línea de tiempo con CSS de forma sencilla y atractiva? En este tutorial completo, aprenderás a diseñar una timeline CSS responsive utilizando solo HTML y CSS, sin frameworks ni JavaScript avanzado. Ideal para portafolios, procesos de desarrollo web o cronogramas visuales. Descubre cómo usar pseudoelementos como :before y :after para lograr un diseño moderno y profesional.

Palabras clave: línea de tiempo CSS, timeline HTML CSS, crear timeline responsive, pseudoclases CSS tutorial.

¿Por Qué Crear una Línea de Tiempo con CSS?

Una línea de tiempo interactiva es un elemento visual clave en sitios web. Ayuda a mostrar eventos cronológicos de manera clara, mejorando la experiencia del usuario (UX). En este guía, optimizaremos tu conocimiento en estilos CSS básicos para construir una timeline vertical responsive que se adapte a móviles y desktops.

Requisitos para Crear una Timeline con CSS

No necesitas ser un experto en desarrollo web, pero domina estos conceptos esenciales:

• Selectores CSS básicos: Para targeting preciso de elementos.
• Pseudoclases y pseudoelementos: Como :nth-child, :before y :after para decoraciones dinámicas.
• Diseño responsive: Usa media queries para adaptabilidad en dispositivos móviles.

Tiempo estimado: 30-60 minutos. Herramientas: Editor de código (VS Code) y navegador.

Crear una Línea de Tiempo con CSS

Estructura HTML para la Línea de Tiempo CSS

Usa una lista desordenada (<ul>) para los eventos, envuelta en un contenedor .timeline. Cada evento es un <li> con contenido descriptivo. Ejemplo base:

HTML

<div class="timeline">
  <ul>
    <li>
      <div class="content">
        <h2>REQUERIMIENTOS ESPECÍFICOS</h2>
        <p><span>Día 1</span></p>
        <p>Se definen las características acordadas del sitio web.</p>
      </div>
    </li>
    <!-- Agrega más <li> para eventos adicionales -->
  </ul>
</div>

Estilos CSS: La Magia de la Línea Central

El secreto de una timeline CSS moderna radica en posicionar elementos alternos alrededor de una línea vertical. Usamos position: absolute y floats para el layout.

1. Línea Central con Pseudoelemento :before

Crea la línea vertical central con este CSS:

CSS

.timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  width: 2px;
  height: 100%;
  background: #6658ea;
}

• Explicación: El content: '' genera un elemento vacío. left: 50% lo centra en el contenedor.

2. Posicionamiento Alterno con :nth-child

Alterna eventos a izquierda/derecha para un diseño zigzag:

CSS

.timeline ul li:nth-child(odd) {
  float: left;
  text-align: right;
  width: 50%;
}

.timeline ul li:nth-child(even) {
  float: right;
  text-align: left;
  width: 50%;
}

• Tip SEO: Usa width: 50% y box-sizing: border-box para un layout fluido y responsive.

3. Puntos y Flechas Decorativas con :before y :after

Agrega círculos (puntos) y triángulos (flechas) para conectar eventos:

Para elementos impares (izquierda):

CSS

.timeline ul li:nth-child(odd)::before {
  content: '';
  position: absolute;
  top: 40px;
  right: -14px;
  width: 20px;
  height: 20px;
  background: white;
  border: 2px solid #6658ea;
  border-radius: 50%;
}

.timeline ul li:nth-child(odd)::after {
  content: '';
  position: absolute;
  border-style: solid;
  width: 0;
  height: 0;
  top: 44px;
  right: 25px;
  border-width: 10px 0 10px 15px;
  border-color: transparent transparent transparent #6658ea;
}

Para elementos pares (derecha): Ajusta left en lugar de right, y el border-color para la flecha opuesta.

4. Estilos Generales para Contenido

CSS

.content {
  border: 1px solid #6658ea;
  padding: 20px;
  border-radius: 20px;
  color: royalblue;
  background: white;
  margin: 20px 0;
}

.timeline ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline ul li {
  position: relative;
  padding: 20px 40px;
  clear: both;
}

Diseño Responsive: Timeline CSS para Móviles

Asegura que tu línea de tiempo responsive funcione en pantallas pequeñas. Coloca todos los eventos a un lado y ajusta la línea:

CSS

@media all and (max-width: 768px) {
  .timeline::before {
    left: 0%;
  }
  
  .timeline ul li {
    width: 100%;
    float: right; /* O left, según preferencia */
    text-align: left;
  }
  
  .timeline ul li:nth-child(odd)::before {
    left: -10px;
  }
  
  .timeline ul li:nth-child(odd)::after {
    left: 25px;
    border-width: 10px 15px 10px 0;
    border-color: transparent #6658ea transparent transparent;
  }
}

Bonus: Animación Scroll con JavaScript (Opcional)

Para una timeline animada CSS, agrega fade-in al scroll:

CSS adicional:

CSS

.content {
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease;
}

.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript simple:

JavaScript

window.addEventListener('scroll', () => {
  document.querySelectorAll('.content').forEach(element => {
    if (element.getBoundingClientRect().top < window.innerHeight) {
      element.classList.add('visible');
    }
  });
});

Esto eleva la interactividad sin complejidad.

Código Completo: Ejemplo Detallado de Timeline CSS

Aquí el HTML/CSS completo para una línea de tiempo de desarrollo web (26 días). Copia y pega para probar.

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Línea de Tiempo CSS: Proceso de Desarrollo Web</title>
    <meta name="description" content="Tutorial para crear una línea de tiempo con CSS responsive. Usa pseudoelementos y media queries para timelines modernas en HTML puro.">
</head>
<body>
    <style>
        .timeline {
            margin: 40px 0;
            position: relative;
        }
        .timeline::before {
            content: '';
            position: absolute;
            left: 50%;
            width: 2px;
            height: 100%;
            background: #6658ea;
        }
        .content {
            border: 1px solid #6658ea;
            padding: 20px;
            border-radius: 20px;
            color: royalblue;
            background: white;
            margin: 20px 0;
        }
        .timeline ul {
            margin: 0;
            padding: 0;
        }
        .timeline ul li {
            list-style: none;
            position: relative;
            width: 50%;
            padding: 20px 40px;
            box-sizing: border-box;
        }
        .timeline ul li:nth-child(odd) {
            float: left;
            text-align: right;
            clear: both;
        }
        .timeline ul li:nth-child(odd)::before {
            content: '';
            position: absolute;
            top: 40px;
            right: -14px;
            width: 20px;
            height: 20px;
            background: white;
            border: 2px solid #6658ea;
            border-radius: 50%;
        }
        .timeline ul li:nth-child(odd)::after {
            content: '';
            position: absolute;
            border-style: solid;
            width: 0;
            height: 0;
            top: 44px;
            right: 25px;
            border-width: 10px 0 10px 15px;
            border-color: transparent transparent transparent #6658ea;
        }
        .timeline ul li:nth-child(even) {
            float: right;
            text-align: left;
            clear: both;
        }
        .timeline ul li:nth-child(even)::before {
            content: '';
            position: absolute;
            top: 40px;
            left: -10px;
            width: 20px;
            height: 20px;
            background: white;
            border: 2px solid #6658ea;
            border-radius: 50%;
        }
        .timeline ul li:nth-child(even)::after {
            content: '';
            position: absolute;
            border-style: solid;
            width: 0;
            height: 0;
            top: 44px;
            left: 25px;
            border-width: 10px 15px 10px 0;
            border-color: transparent #6658ea transparent transparent;
        }
        @media all and (max-width: 768px) {
            .timeline::before {
                left: 0%;
            }
            .timeline ul li {
                width: 100%;
            }
            .timeline ul li:nth-child(odd) {
                float: right;
                text-align: left;
            }
            .timeline ul li:nth-child(odd)::before {
                left: -10px;
            }
            .timeline ul li:nth-child(odd)::after {
                left: 25px;
                border-width: 10px 15px 10px 0;
                border-color: transparent #6658ea transparent transparent;
            }
        }
    </style>
    <div class="timeline">
        <ul>
            <li>
                <div class="content">
                    <h2>REQUERIMIENTOS ESPECÍFICOS</h2>
                    <p><span>Día 1</span></p>
                    <p>Es una <strong>lista de las características</strong> con las cuales se desarrollará su página web y que son acordadas entre Ud. y el equipo de desarrollo web. Dónde se valida la viabilidad de cada una de las características.</p>
                </div>
            </li>
            <li>
                <div class="content">
                    <h2>RECOLECCIÓN DE LA INFORMACIÓN</h2>
                    <p><span>Del día 2 hasta el día 4</span></p>
                    <p>Etapa que permite <strong>juntar toda la información</strong> de la empresa, donde participa activamente el representante de la empresa...</p>
                </div>
            </li>
            <!-- Continúa con los otros eventos similares: BOSQUEJOS, ORGANIZACIÓN DE LOS RECURSOS, BASE DE DATOS, DESARROLLO BACKEND, DISEÑO FRONTEND, TESTING Y SUBSANACIÓN, PUBLICACIÓN EN INTERNET, ENTREGA -->
            <li>
                <div style="clear: both;"></div>
            </li>
        </ul>
    </div>
</body>
</html>

Demo 1: Prueba este código en tu navegador para ver la timeline CSS detallada en acción.

Ejemplo Simple: Timeline CSS Minimalista

Para un diseño más ligero, aquí una versión básica con animaciones:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timeline CSS Simple y Responsive</title>
    <style>
        body { background: crimson; }
        .timeline { position: relative; }
        .timeline::before { 
            content: ''; 
            position: absolute;
            background: rgb(255, 255, 255); 
            width: 1px; 
            left: 50%;
            height: 100%;
        } 
        .child { padding: 20px; position: relative; width: 50%; }
        .child:nth-child(odd) { float: left; }
        .child:nth-child(odd)::after { /* Línea horizontal izquierda */ }
        .child:nth-child(odd)::before { /* Círculo izquierdo */ }
        .child:nth-child(even) { float: right; text-align: right; }
        .child:nth-child(even)::before { /* Círculo derecho */ }
        .child:nth-child(even)::after { /* Línea horizontal derecha */ }
        .content {
            width: 100px; /* Ajusta según necesites */
            padding: 20px;
            box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
            border-radius: 5px;
            background: white;
            transition: all 1s;
            opacity: 0;
        }
        .visible { opacity: 1; transform: translate(0, 0); }
    </style>
    <script>
        window.addEventListener('scroll', () => {
            document.querySelectorAll('.content').forEach(element => {
                if (element.getBoundingClientRect().top < window.innerHeight) {
                    element.classList.add('visible');
                }
            });
        });
    </script>
</head>
<body>
    <div class="timeline">
        <div class="parent">
            <div class="child">
                <div class="content">Evento 1: Descripción breve...</div>
            </div>
            <!-- Agrega más <div class="child"> -->
        </div>
    </div>
</body>
</html>

Demo 2: Versión minimalista con fondo rojo y animaciones suaves.

✅ Resultado: Timeline HTML CSS de Alta Calidad

Hemos demostrado cómo implementar una línea de tiempo robusta y visualmente atractiva utilizando únicamente HTML y CSS bien estructurados, enfocándonos en la manipulación de posicionamiento y pseudoelementos. Este componente es altamente adaptable a cualquier cronograma o flujo de proceso.

✅ Resultado: Timeline HTML CSS de Alta Calidad

---

Leido 9394 veces | 51 usuarios