Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo para un conocido que me preguntó cómo podría crear un TimeLine Vertical, para realizar una presentación de sus cosas. Bueno, pues en las siguientes líneas vamos a ver como cualquier usuario puede crear un diseño de línea de tiempo vertical, totalmente responsive, utilizando solo HTML y CSS. Tengo que decirle a este usuario, que quizás también le venga bien echar un vistazo al artículo llamado Tabla responsive, crea una usando solo HTML y CSS que escribí hace unas semanas. Este artículo creo que se puede complementar bien, para el propósito que busca el usuario que me pidió este código, con lo que vamos a ver.
En general, una línea de tiempo es un gráfico que enumera los eventos importantes para años progresivos dentro de un tiempo histórico particular. Una línea de tiempo vertical, es un tipo de diagrama que muestra eventos o períodos de tiempo en un formato lineal, con eventos ordenados de arriba a abajo en función de la fecha o del orden cronológico en el que ocurrieron. Las líneas de tiempo verticales a menudo incluyen etiquetas y descripciones de los eventos, pudiendo ser utilizadas para visualizar la secuencia de acontecimientos en una historia, proceso o proyecto.
Un vistazo rápido a la linea de tiempo vertical
En la línea de tiempo vertical que vamos a crear, vamos a mostrar el título, la descripción, la fecha y el nombre del escritor de cada uno de los eventos en particular. En el centro del diseño, vamos a ver una línea blanca vertical con íconos. Cada ícono apuntará a su evento relacionado. Nos va a permitir añadir más eventos de forma sencilla.
Al final de la línea de tiempo, veremos un icono de desplazamiento hacia arriba, el cual nos permitirá llegar fácilmente a la parte superior de la página con un solo clic. Esta línea de tiempo es compatible con dispositivos móviles, y se va a crear usando solo HTML y CSS.
Este ejemplo utiliza CSS puro, por lo que aun que seas un principiante en el diseño web, no te resultará complicado comprender los códigos de este diseño con los que crear este tipo de línea de tiempo. Para crear esta línea de tiempo y hacerla receptiva, utilicé la propiedad flexbox de CSS, que permite alinear fácilmente un elemento de forma sencilla.
Código para crear un TimeLine Vertical responsive
Para crear este ejemplo, vamos a utilizar dos archivos. El primero de ellos será un archivo HTML, en el que incluiremos el cuerpo de la página y los datos de cada uno de los eventos. Después vamos a crear otro archivo CSS, en el que añadiremos las reglas CSS necesarias.
Después de crear estos archivos, tan solo será necesario pegar los siguientes códigos en su correspondiente archivo.
Código index.html
En este archivo, vamos a añadir este código de una página web HTML, el cual nos servirá para mostrar una línea de tiempo vertical. La línea de tiempo consiste en diferentes eventos con títulos, fechas, descripciones y enlaces a otras páginas. La página web utiliza CSS para el diseño de su estilo, y los iconos FontAwesome para utilizarlos en la línea de tiempo. Gracias a las reglas CSS y a la etiqueta «meta viewport» en la sección «head», la página web será responsive.
Como decía, primero vamos a crear un archivo HTML, con el nombre index.html. Y dentro solo será necesario pegar el siguiente código:
Responsive Timeline TIMELINE-VERTICAL ENTREUNOSYCEROS 1 de Enero - 2007Página web que empezó como blog para colgar apuntes y demás cosas que me resultasen interesantes o útiles.
Visitar - Web principal About ENTREUNOSYCEROS 16 Agosto - 2008Una web en la que mostrar algunos de los proyectos realizados, y alguna otra información sobre mi y mis otros Yo's.
Visitar - Web about SapoBuskedas 13 Enero - 2009Buscador que permite realizar búsquedas en diferentes buscadores.
Visitar - Buskador Apuntadorium 4 de Octubre - 2010Diccionario de conceptos informáticos en los que los usuarios podrían compartir conocimientos y códigos.
Visitar - Diccionario de conceptos UnosYCeros 11 de Noviembre - 2011Muro dinámico que muestra 1's y 0's de forma dinámica.
Visitar - Fondo dinámico Nota-Ria 6 de Marzo - 2012Se ha desarrollado una aplicación para tomar notas desde el navegador web.
Visitar - Tomar notas Ahorcado 4 de Abril - 2013Hemos desarrollado el típico juego del ahorcado. Este juego se pensó para ser utilizado desde el navegador web del PC.
Visitar - Ahorcado
Archivo style.css
El código que vamos a ver a continuación, es un estilo CSS para la página HTML del archivo index.html. Estas reglas definen la apariencia visual de la página, incluyendo colores de fondo, fuentes, tamaños de fuentes, bordes, sombras, animaciones, posicionamientos y más. Algunos de los detalles que se van a configurar incluyen:
- La fuente principal será Arial y las fuentes secundarias son Helvetica y sans-serif.
- El color de fondo del cuerpo de la página se establecerá en #6b00a8 (un color morado oscuro).
- La selección de texto se mostrará con un color de letra blanco y un fondo amarillo.
- El título va a tener una sombra con diferentes tonos de rojo y gris.
- La sección principal tendrá un ancho máximo de 1080 píxeles, un margen automático y una sombra en la caja.
- Las secciones se organizarán en una estructura de filas y secciones dentro de un envoltorio.
- La fila de la izquierda tendrá un icono a la derecha y la fila de la derecha tendrá un icono a la izquierda.
En general, este código se encarga de dar una apariencia atractiva y organizada a la página web.
Como decía, en segundo lugar, vamos a crear el archivo CSS con el nombre style.css. Dentro solo tendremos que pegar las siguientes reglas CSS.
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } html{ scroll-behavior: smooth; } body{ background: #6b00a8; } /*Selección de texto*/ ::selection{ color: #fff; background: #ffa703; } /*Título*/ .titulo { display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 10px; border: none; font: normal 38px / normal "Warnes", Helvetica, sans-serif; color: rgba(255, 255, 255, 1); text-decoration: normal; text-align: center; -o-text-overflow: clip; text-overflow: clip; white-space: pre; text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0), 0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272, 0 0 80px #4e4e4e, 0 0 100px #2b2b2b; -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1); width: 100%; margin-top: 10px; } .titulo:hover { text-shadow: 0 0 10px rgb(69, 0, 109), 0 0 20px rgb(73, 0, 95), 0 0 30px rgb(57, 0, 68), 0 0 40px #580054, 0 0 70px #000000, 0 0 80px #000000, 0 0 100px #000000; } /*Envoltura*/ .wrapper{ max-width: 1080px; margin: 50px auto; padding: 0 20px; position: relative; } .wrapper .center-line{ position: absolute; height: 100%; width: 4px; background: #d1d1d1; left: 50%; top: 20px; transform: translateX(-50%); } .wrapper .row{ display: flex; } .wrapper .row section{ background: #fff; border-radius: 5px; width: calc(50% - 40px); padding: 20px; position: relative; box-shadow: 0 0 0 4px #fff, inset 2px 2px rgba(0, 0, 0, 0.253), 3px 4px rgba(0, 0, 0, 0.144); } .wrapper .row section::before{ position: absolute; content: ""; height: 15px; width: 15px; background: #fff; top: 28px; z-index: -1; transform: rotate(45deg); } /*izquierda*/ .wrapper .row-1{ justify-content: flex-start; } .row-1 section::before{ right: -7px; } .row-1 section .icon{ top: 15px; right: -60px; } /*derecha*/ .wrapper .row-2{ justify-content: flex-end; } .row-2 section::before{ left: -7px; } .row-2 section .icon{ top: 15px; left: -60px; } /*Botón subir arriba*/ .center-line .scroll-icon{ bottom: 0px; left: 50%; font-size: 25px; transform: translateX(-50%); } /*Líneas*/ .row section .icon, .center-line .scroll-icon{ position: absolute; background: #f2f2f2; height: 40px; width: 40px; text-align: center; line-height: 40px; color: #89009b; font-size: 17px; box-shadow: 0 0 0 4px #fff, inset 0 2px 0 rgba(0, 0, 0, 0.253), 0 3px 0 4px rgba(0, 0, 0, 0.144); } .row section .details, .row section .bottom{ display: flex; align-items: center; justify-content: space-between; } .row section .details .title{ font-size: 22px; font-weight: 600; } .row section p{ margin: 10px 0 17px 0; } /*Botones leer más*/ .row section .bottom a{ text-decoration: none; background: #2f003d; color: #fff; padding: 7px 15px; border-radius: 5px; font-weight: 400; transition: all 0.3s ease; } .row section .bottom a:hover{ transform: scale(0.97); background: #9f00cf; } /*MediaQuerys*/ @media(max-width: 790px){ .wrapper .center-line{ left: 40px; } .wrapper .row{ margin: 30px 0 3px 60px; } .wrapper .row section{ width: 100%; } .row-1 section::before{ left: -7px; } .row-1 section .icon{ left: -60px; } } @media(max-width: 440px){ .wrapper .center-line, .row section::before, .row section .icon{ display: none; } .wrapper .row{ margin: 10px 0; } }
Y esto es todo. Con esto ya tendremos creado el TimeLine vertical responsive usando HTML y CSS. Si quieres ver este ejemplo en funcionamiento, tan solo tendrás que acceder a la sección de ejemplos de esta web.