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

Autor: J. Luis

#CSS #HTML

Para crear una linea de tiempo con CSS usaremos las seudoclases selectivas impares y no impares odd y even, veamos una aplicación o ejemplo práctico.

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

Suscríbete a nuestro canal en Youtube

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

🧱 Estructura HTML

Nuestra línea de tiempo estará compuesta por una lista ordenada de eventos. Cada evento se representa como un <li> dentro de una lista <ul>. Aquí un ejemplo básico:

<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>
    <!-- Más eventos... -->
  </ul>
</div>

🎨 Estilos CSS

La clave del diseño está en cómo posicionamos los elementos a ambos lados de una línea central. Aquí explicamos los fragmentos más importantes.

🌟 Línea central con `:before`

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

Esto dibuja la línea vertical en el centro. Usamos position: absolute para colocarla en medio del contenedor .timeline.

👣 Elementos alternos con `nth-child`

Para colocar eventos a la izquierda y a la derecha, usamos pseudoclases:

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

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

Cada evento usa float y width: 50% para alinearse a un lado de la línea.

🎯 Puntos y flechas decorativas

Usamos :before para el punto, y :after para una flecha que apunta a la línea central:

.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%;
}

📱 Diseño Responsive

Para pantallas pequeñas, colocamos todos los elementos a la izquierda y ajustamos los puntos y flechas:

@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;
  }
}

🧪 Bonus: Animación al hacer scroll

Si quieres animar los eventos cuando aparecen en pantalla, puedes añadir este pequeño script JavaScript:

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

Y en tu CSS:

.content {
  opacity: 0;
  transition: all 1s;
}
.visible {
  opacity: 1;
  transform: translate(0, 0);
}

🎁 Resultado Final

Una línea de tiempo clara, visualmente atractiva y adaptable a cualquier tipo de contenido: procesos de desarrollo web, currículums, cronogramas, etc. Crear una línea de tiempo en CSS no requiere conocimientos avanzados, pero sí saber usar pseudoelementos y jugar con posiciones relativas y absolutas. Este tipo de componente eleva la calidad visual de cualquier proyecto web.

Veamos el Código completo CSS de un timeline en CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LINEA DE TIEMPO CON CSS</title>
</head>
<body>
    <style>
    .timeline{
        margin-top: 40px;
        margin-bottom: 40px;
        position: relative;
    }
    .timeline:before{
        content: '';
        position: absolute;
        left: 50%;
        width: 2px;
        height: 100%;
        background: #6658ea
    }
    .content{ border: #6658ea 1px solid; padding: 20px; border-radius: 20px; color: royalblue;}
    .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 0px;
        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 0px;
            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>
              Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem at provident esse eaque similique molestias hic laborum ratione tempore! Explicabo consequuntur cum eius tempora expedita harum ipsam illum similique pariatur?
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur beatae maiores quaerat. Harum ut odio cum vero ex beatae vel at expedita debitis praesentium unde laudantium veritatis quisquam, possimus atque!
            </div>
          </li>
          <li>
            <div class="content">
              <h2>RECOLECCIÓN DE LA INFORMACIÓN</h2>
              <p> <span>Del día 2 hasta el dia 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, puesto que debe proporcionar elementos como: El Manual de Imagen Corporativa, El logotipo en sus formatos vectoriales, Una redacción adecuada de cada sección que desea en su página web, Recursos multimedia como imágenes de muy buena calidad, videos, pdf, etc. Algunas sugerencias de diseño web</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>BOSQUEJOS</h2>
              <p> <span>Del día 5 hasta el dia 7</span></p>
              <p>Son <strong>diseños tentativos</strong> de como se verá su página web, es aqui donde se realizan todas las posibles modificaciones hasta llegar a un diseño final aprobado por Ud. El cuál servirá de guía para continuar con el desarrollo.</p>
            </div>
          </li>
      
          <li>
            <div class="content">
              <h2>ORGANIZACIÓN DE LOS RECURSOS</h2>
              <p> <span>Del día 8 hasta el dia 9</span></p>
              <p>El redactor web <strong>organiza los textos</strong> mediante una redacción acorde con el rubro de la empresa basándose en la lista de requerimientos, de igual forma el diseñador gráfico <strong>prepara y optimiza los elementos gráficos</strong> que se incluirán en el sitio web.</p>
            </div>
          </li>
          
          <li>
            <div class="content">
              <h2>BASE DE DATOS</h2>
              <p> <span>Del día 10 hasta el dia 11</span></p>
      
              <p>Empieza el desarrollo web con la <strong>implementación de una base de datos</strong>. Esto le permitirá gestionar algunas secciones en su página web como: publicar un post, insertar o actualizar sus servicios o productos, actualizar los datos de contacto, etc. Depende de los requerimientos acordados.</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>DESARROLLO BACKEND</h2>
              <p> <span>Del día 12 hasta el dia 17</span></p>
      
              <p>Es uno de las etapas más importantes porque definen la dinámica de su sitio web, la seguridad, la rápidez, la arquitectura de Urls, el respaldo de información. <strong>Es el motor de su página web</strong>. </p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>DISEÑO FRONTEND</h2>
              <p> <span>Del día 18 hasta el dia 23</span></p>
      
              <p>El profesional de esta área, maqueta o <strong>diseña la parte visual de su página web</strong>, impregna sus conocimientos de UX/UI para obtener un sitio web rápido, amigable, simple y fácil de navegar. Cónoce mucho la combinación de colores, distribución de contenidos, etc. </p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>TESTING Y SUBSANACIÓN</h2>
              <p> <span>Del día 24 hasta el dia 25</span></p>
      
              <p>Son <strong>pruebas para encontrar posibles errores</strong> como enlaces rotos, uso de demasiados recursos que hacen lenta la carga de su página web, imágenes pesadas, textos no congruentes, faltas ortográficas, etc. Que deben ser subsanadas.</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>PUBLICACIÓN EN INTERNET</h2>
              <p> <span>Día 26</span></p>
      
              <p>Consiste en <strong>colocar su página web en internet</strong> mediante el registro de un dominio y el almacenamiento de los recursos de su página web en un servidor web. De igual forma tambien se realiza un testing pero en linea.</p>
            </div>
          </li>
          <li>
            <div class="content">
              <h2>ENTREGA</h2>
              <p> <span>Día 27</span></p>
              <p>Finalmente se proporciona la <strong>información para que Ud. pueda administrar su sitio web</strong> además de una capacitación en el uso del sistema. También se le entregará la información de las fechas de renovación de los servicios de hosting y dominio. </p>
            </div>
          </li>
      
          <div style="clear: both"></div>
        </ul>
      </div>
      
      </div>
      
</body>
</html>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background: crimson;
        }
        .timeline{ 
            position: relative;
        }   
        .timeline{ 
            content: ''; 
            position: absolute;
            background: rgb(255, 255, 255); 
            width: 1px; 
            left: 50%;
        } 
        .child{            
            padding: 20px;            
            position: relative;
        }
        .child:nth-child(odd){
            float: left;
        }
        .child:nth-child(odd)::after{
            content: '';
            background-color: white;
            height: 1px;
            width: 20px;
            position: absolute;
            top: 30px;
            left: 0px;
        }
        .child:nth-child(odd)::before{
            content: '';
            position: absolute;
            background-color: rgb(255, 255, 255);            
            border-radius: 50%;
            width: 20px;
            height: 20px;
            left: -10px;
        }
        .child:nth-child(even)::before{
            content: '';
            position: absolute;
            background-color: rgb(255, 255, 255);            
            border-radius: 50%;
            width: 20px;
            height: 20px;
            right: -10px;            
        }
        .child:nth-child(even)::after{
            content: '';
            background-color: rgb(255, 255, 255);
            height: 1px;
            width: 20px;
            position: absolute;
            top: 30px;
            right: 0px;
        }
        .child:nth-child(even){
            float: right;
            text-align: right;
        }
        .content{
            width: 100px;
            padding: 20px;
            box-shadow: 0 0 1rem 0 rgba(0, 0, 0, .2); 
            border-radius: 5px;
            background: white;
            /*background-color: rgba(255, 255, 255, .15);
            backdrop-filter: blur(5px);*/
            transition: all 1s;
            opacity: 0;
        }
        .visible {
            opacity: 1;
            transform: translate(0, 0);
        }
    </style>
    <script>
        window.addEventListener('scroll',e=>{            
            var item= document.querySelectorAll('.content')
            item.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">
                sequi molestias sed dolore iusto at eaque quas voluptas nobis. Rem adipisci ullam quia unde?
                </div>
            </div>
            <div class="child">
                <div class="content">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, labore officia voluptates cupiditate, nam fugit 
                </div>
            </div>
            <div class="child">
                <div class="content">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, labore officia voluptates cupiditate, nam fugit 
                </div>
            </div>
            <div class="child">
                <div class="content">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, labore officia voluptates cupiditate, nam fugit 
                </div>
            </div>
            <div class="child">
                <div class="content">
                sequi molestias sed dolore iusto at eaque quas voluptas nobis. Rem adipisci ullam quia unde?
                </div>
            </div>
            <div class="child">
                <div class="content">
                Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, labore officia voluptates cupiditate, nam fugit 
                </div>
            </div>
            <div class="child">
                <div class="content">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, labore officia voluptates cupiditate, nam fugit 
                </div>
            </div>
            <div class="child">
                <div class="content">
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laborum, labore officia voluptates cupiditate, nam fugit 
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Leido 8726 veces | 48 usuarios

Descarga del código fuente HTML + CSS de Cómo Crear una Línea de Tiempo (Timeline) con HTML y CSS

Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.