Vamos a pasar por algo increíble Ejemplos de línea de tiempo CSS y HTML. Todos estos se pueden usar e integrar en sus propios proyectos (es decir, cartera personal en línea). Inspírese y tal vez incluso use uno de nuestra lista. Pero antes de nada, aclaremos qué es una línea de tiempo.
¿Qué es una línea de tiempo HTML en diseño web?
Una línea de tiempo es una forma útil de mostrar una amplia gama de información o puntos de datos a un usuario. Las empresas los usan para mostrar su existencia a lo largo del tiempo y lo que han hecho a lo largo de los años, y las personas también pueden usarlos para mostrar el trabajo de su cartera a lo largo del tiempo..
Probablemente ya te hayas encontrado con una línea de tiempo.
Diferentes tipos de líneas de tiempo HTML y CSS
Aunque una línea de tiempo HTML es relativamente simple, hay algunos tipos diferentes que debe tener en cuenta.
- puedes tener un línea de tiempo verticales donde la información se esparce verticalmente (veremos ejemplos más abajo)
- o puedes tener líneas de tiempo horizontales que muestran información en la pantalla a lo largo del eje x.
Luego tenemos la otra categoría: líneas de tiempo interactivas. Estos pueden ser verticales u horizontales y, a veces, ambos.
Cada tipo puede reducirse fácilmente a un dispositivo móvil y también funcionar de manera totalmente receptiva.
Ejemplos de línea de tiempo de CSS y HTML
La mayoría solo requiere HTML y CSS puros, pero si busca una línea de tiempo más compleja, es posible que deba aceptar una pequeña cantidad de JavaScript (si no conoce JS, no se preocupe, no debería tomar mucho tiempo para aprender JavaScript)
1. línea de tiempo de pantalla completa
Si puede considerar un diseño de sitio web de pantalla completa, este diseño es ideal para usted.
la bbc utiliza este diseño exacto para el mismo propósito. Muestra información en una línea de tiempo, donde cada sección representa un punto diferente en el tiempo.
Su navegador no soporta la etiqueta de vídeo.
Este diseño de línea de tiempo es ideal para contar historias. Se siente tan natural seguir desplazándose hacia abajo para obtener más información en orden cronológico.
2. Línea de tiempo del panel
Algo así como una línea de tiempo de estilo vertical normal, pero tiene el formato de paneles de pantalla completa, al pasar el mouse, aparece una imagen y un texto para mostrar esa fecha.
Utiliza animaciones y transiciones elegantes, muy atractivas de usar. Incluso podría agregar animaciones de fondos CSS en cada panel de pantalla para captar la atención del usuario.
3. Línea de tiempo vertical izquierda-derecha
Este es un gran ejemplo de cómo se ve una línea de tiempo CSS vertical, es simple y efectivo y solo usa HTML y CSS puros.
4. Línea de tiempo de bloque vertical
Otro gran ejemplo de una línea de tiempo de estilo vertical que solo usa HTML y CSS, muy fácil de comenzar con este.
Los puntos de indicación de la línea de tiempo de CSS están en el lado izquierdo y luego la información de la derecha funciona muy bien en un dispositivo móvil.
5. Deslizar la línea de tiempo horizontal
Un maravilloso ejemplo de una línea de tiempo horizontal que es muy atractiva y excelente para dispositivos móviles porque utiliza una acción de deslizamiento para activar la línea de tiempo HTML entre fechas. Un control deslizante animado se desliza cada vez que selecciona una fecha. Se puede usar en el escritorio y hacer clic.
Este usa un poco de JavaScript, pero sigue siendo muy fácil de usar. También se reproduce automáticamente.
6. Línea de tiempo vertical de izquierda a derecha
Línea de tiempo HTML vertical de izquierda a derecha que es excelente para un diseño que se basa en el desplazamiento hacia abajo. Los puntos de indicación de la línea de tiempo son diagonales desde el centro y se pueden configurar en diferentes colores.
Este solo usa HTML puro y CSS.
7. Línea de tiempo vertical escalonada
Línea de tiempo CSS vertical con un diseño centrado/escalonado donde se ubican todas las fechas. Genial para un sitio web con animaciones de desplazamiento.
Solo usa HTML y CSS, por lo que es fácil trabajar con él.
8. Línea de tiempo de tarjeta de izquierda a derecha
Este es realmente agradable porque es un gran ejemplo de cómo puede hacer que una línea de tiempo HTML vertical básica se vea realmente moderna. Tiene espacio para un ícono que se puede cambiar entre fechas, una tarjeta con título y descripción con espacio para otra información, además tiene un botón.
Solo usa HTML puro y CSS.
9. Línea de tiempo en zigzag
Este es un poco diferente y ofrece un enfoque en zig-zag para el estilo de línea de tiempo vertical, solo usando HTML y CSS para lograrlo también. Tiene un estilo básico pero se puede cambiar con tu propio estilo.
10 Línea de tiempo de pedido de perfil de usuario
Muy diferente de lo que hemos visto, pero solo usa HTML y CSS para lograr todo este diseño.
Sin embargo, tiene excelentes ejemplos del uso en el mundo real de una línea de tiempo CSS. Muestra una línea de tiempo vertical y otra horizontal, basadas en la página de pedidos de un cliente.
Este es realmente único porque puedes ver y aprender de esto.
11 Línea de tiempo vertical de izquierda a derecha
Un gran ejemplo de una línea de tiempo HTML vertical con un diseño diferente que usa imágenes para cada fecha y también tiene un diseño de título.
12 Línea de tiempo de carrusel horizontal
Una línea de tiempo horizontal muy atractiva que utiliza un efecto de carrusel. Utiliza HTML, CSS y un poco de JavaScript.
Fácil de reemplazar cada icono o color para convertirlo en su marca.
13 Línea de tiempo vertical con desplazamiento animado
Si está buscando algo con alguna animación basada en el desplazamiento del usuario, este es un gran ejemplo. A medida que se desplaza, toda la línea de tiempo se anima, el texto y las imágenes se deslizan a la vista y la línea de tiempo está en el centro. También funciona a medida que se desplaza hacia arriba.
14 Línea de tiempo vertical de izquierda a derecha
Una línea de tiempo vertical de izquierda a derecha HTML y CSS puro que tiene un diseño bastante bueno. Utiliza fechas grandes y puede mostrar imágenes con texto.
15. Línea de tiempo receptiva centrada
Un estilo de línea de tiempo centrado clásico con fechas que se muestran a la izquierda y a la derecha. Hecho con solo HTML y CSS. Es fácil cambiar los colores en este.
dieciséis. Línea de tiempo de estilo de cuadrícula
Este es un poco más exclusivo porque se basa en el uso de la función de cuadrícula CSS para mostrar la línea de tiempo. Con esta línea de tiempo HTML, es más avanzado en cuanto a la cantidad de información que puede mostrar en una sola fecha, algo así como un diagrama de flujo, pero podría usarse como una línea de tiempo.
17 Línea de tiempo vertical animada
Una buena línea de tiempo con animaciones sutiles. Se desliza en cada elemento como una tarjeta. Tiene un diseño de tarjeta simple con un título y una descripción. Hecho con HTML, CSS y un poco de JavaScript.
18 Cronología del proceso escalonado
Un gran ejemplo de cómo puede usar una línea de tiempo para guiar a un usuario a través del proceso de configuración de una cuenta. Las líneas de tiempo HTML no siempre tienen que usarse con una fecha.
19 Línea de tiempo vertical con efectos de desplazamiento
Un buen diseño para una línea de tiempo CSS vertical que utiliza animaciones de desplazamiento únicas para hacer que el diseño sea más atractivo para el usuario. Se puede hacer clic en cada sección cuando se desplaza el cursor, lo que lleva a otra página si es necesario. También puede agregar botones con animaciones de desplazamiento CSS.
Hecho puramente con HTML y CSS.
Pensamientos finales
Esperamos que tenga una mejor comprensión de los diferentes tipos de línea de tiempo de CSS y HTML y que lo hayamos inspirado con los ejemplos que se muestran.
Una línea de tiempo puede ser una excelente manera de mostrar mucha información en un área o de una manera específica. Adjuntar fechas o eventos a una línea de tiempo de CSS puede ayudar a guiar a los usuarios a través de la información que ven.
Si te gustan los diseños de pantalla completa, definitivamente deberías echar un vistazo a fullPage.js. ¡Es maravillosamente simple!
Y si no, simplemente elija cualquiera de los anteriores que mejor se adapte a sus necesidades.
Artículos relacionados
Sobre el Autor:
lucas embrey es un desarrollador full-stack, BSc en Ciencias de la Computación y con sede en el Reino Unido.
Puedes saber más sobre él en https://lukeembrey.com/
