Inicio » Blog » HTML + CSS

16 diciembre, 2020

Timeline en CSS sencillo

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.

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

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

Veamos el Código 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 4962 veces

Descarga el código fuente HTML + CSS

Recurso descargado 51 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Aprende más sobre HTML + CSS

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023