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

Vertical Timeline

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.

línea del tiempo con html5

 

 

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: