Podrás ver como se crea una línea del tiempo con html5 y css3 (también conocida por el su nombre en inglés de timeline css) en formato vertical u horizontal. Utilizando líneas del tiempo en nuestros trabajos conseguimos claridad en los datos a mostrar. Es una forma fácil de obtener un buen resultado gráfico.
También puede que te interese otro artículo muy relacionado con las líneas de tiempo html5:
Timelines verticales
Simplemente con css y html podrás conseguir este efecto utilizando capas. Utiliza la etiqueta time de html5 y estilos css3.
El inconveniente de esta línea de tiempo es que sólo funciona con los navegadores modernos.
Esta línea temporal html te servirá para ir mostrando fechas, o para enseñar tu curriculum vitae de una forma muy visual. También te quedará genial para una página web de eventos donde quieras enseñar todo lo que va a suceder ese día organizado por horas.
Con números
Esta línea de tiempo tiene números y la línea tiene diferentes degradados, por lo que va cambiando de color. Utilizando solo html y css podrás tener este timeline vertical en tu sitio web.
See the Pen Timeline Custom Counter with Gradient Border by Lauren Chilcote (@letsbleachthis) on CodePen.
Responsive timeline con fechas
Si buscas una línea de tiempo donde tengas que insertar fechas, mira la imagen para que veas si es lo que estás buscando. Lo bueno de este timeline es que puedes poner el mes y después indicar distintas fechas dentro del mismo período.
See the Pen Responsive Timeline Concept by Jones Joseph (@jo_Geek) on CodePen.
Sencillo timeline
Es la típica línea del tiempo indicando con puntos los distintos elementos. Está desarrollada con HTML y CSS (less).
See the Pen CSS Timeline for Giggles by Alan Houser (@alanhouser) on CodePen.
CSS Timeline con fechas
Es otra variante a otro visto más arriba, con un diseño diferente pero con la misma esencia, que se vean años y fechas.
See the Pen CSS Timeline with Custom Properties by Stas Melnikov (@melnik909) on CodePen.
Timeline IU
Mira este timeline sencillo y minimalista, ideal para móviles.
See the Pen Timeline UI by Simon Reinsperger (@abisz) on CodePen.
Responsive Vertical línea de tiempo
Otra opción más. Esta vez en vertical y responsive.
See the Pen Responsive Vertical Timeline by Ratko Solaja (@Ratko_Solaja) on CodePen.
Single div timeline
Otra sencilla línea de tiempo en css y html.
See the Pen Single div timeline by Niels Voogt (@NielsVoogt) on CodePen.
Con intervalos punteados
La siguiente línea del tiempo es un poco diferente al resto porque hay las típicas líneas y en otros huecos donde hay espacio de tiempo y no hay información está la línea punteada.
See the Pen CSS V-timeline w/ time intervals (by Frontend Tips) by Andres (@Fahrek) on CodePen.
Timelines horizontales
Con las líneas de tiempo horizontales es necesario que también tengan código javascript.
Responsive timeline en horizontal
Sencilla línea de tiempo que al ir pulsando el visitante en cada punto se va mostrando un texto diferente.
See the Pen responsive timeline v3 by Clay Larson (@cjl750) on CodePen.
Línea de tiempo interactiva
Otra opción horizontal, con un ejemplo con imágenes.
See the Pen Nested & Color Coded Interactive Timeline by Kent Chang (@kentchangdesign) on CodePen.
Slide y timeline horizontal responsive
Es un slide y a la vez un timeline con fotos.
See the Pen Responsive history timeline by Dejan Babić (@microfront) on CodePen.
Típico timeline horizontal
Si estás buscando la típica línea horizontal con cuadrados, esta opción te vendrá perfecta.
See the Pen Building a Horizontal Timeline With CSS and JavaScript by Envato Tuts+ (@tutsplus) on CodePen.
Minimalista línea de tiempo en formato horizontal
Bonita línea donde se puede ver toda la información de una forma muy visual.
See the Pen horizontal timeline by Ritesh Kumar (@ritz078) on CodePen.
¿Quieres ver más recursos HTML5 y CSS3?
Aquí tienes otros artículos muy relacionados con el que acabas de ver:
