Línea de tiempo vertical minimalista con CSS puro-Timelinado

Vista prévia

Descripción

Timelinado es una librería CSS simple pero robusta y altamente personalizable para generar una línea de tiempo vertical y totalmente adaptable desde la estructura HTML simple.

Funcionamiento

Descargue e incluya Timeline. CSS en la sección Head de la página HTML.

<link rel="stylesheet" href="css/timeline.css">

Incluya el Font awesome opcional para los iconos de nodo de línea de tiempo.

<link rel="stylesheet" href="font-awesome.min.css">

La estructura de marcado básica para la línea de tiempo.

<div class="timeline timeline-collapsing azul-amarillo-amarillo timeline-with-arrows">

<div class="timeline-block">



<div class="timeline-icon timeline-icon-hide-border">



<i class="fa fa-camera-retro fa-lg"></i>


</div>


 <div class="arrow-right"></div>


<div class="timeline-content">



 <p> Any content </p>



 <div class="timeline-date">Yesterday</div>


</div>

</div>

<div class="timeline-block timeline-block-icon-only">


<div class="timeline-icon timeline-icon-text timeline-icon-hide-border">



<span>Testing this thingTesting this thing</span>


</div>


<div class="timeline-content"><div class="timeline-date">Yesterday</div>


</div>




</div>


<div class="timeline-block">


<div class="timeline-icon"></div>


<div class="timeline-content">



<h2>This header</h2>



<p>Nullam luctus ligula ac venenatis tempor. Donec maximus lacus sed ullamcorper viverra. Donec gravida at sem at dapibus. Praesent interdum nec leo ut tincidunt. Fusce lacinia ultricies arcu, quis lacinia libero accumsan quis. Nam ac diam ac ex elementum rhoncus. Sed sed lacinia massa. Maecenas iaculis lectus eu aliquam sollicitudin. Vestibulum aliquam tellus vel tempus fermentum. Duis aliquam fringilla volutpat. Nulla facilisi.</p>


<div class="timeline-date">Yesterday</div>


</div>




</div>
</div>

Los ayudantes CSS & modificadores.

• . Timeline-izquierda : la línea está a la izquierda, mientras que el contenido está siempre a la derecha;
• . Timeline-alternancia : los bloques se alternan entre la izquierda y la derecha de la línea;
• . Timeline-contraer : la línea de tiempo cambia automáticamente a la línea de tiempo-modo izquierdo cuando el contenedor es pequeño (800px, por defecto);
• . Timeline-con-flechas : incluye las flechas hacia la línea (funciona con los modos predeterminado y izquierdo).
• . Timeline-icono-Ocultar-Border : elimina el borde del círculo de iconos. Para . Timeline-icono elemento.
• . línea de tiempo-bloque-icono-sólo : muestra el contenido de la línea de tiempo en el bloque. Para . Timeline-bloque elemento.

Esquemas de color.

• gris-rojo
• gris-azul
• azul-amarillo-amarillo
• púrpura-flirteo, azul-azul-azul