29 grandes liñas de tempo de deseño en CSS e cun pouco de Javascript

Cronoloxía de desprazamento

As liñas de tempo ou liñas de tempo son outro dos elementos adicionais que podemos incrustar nun sitio web para amosar o progreso ou a evolución en anos dunha empresa ou empresa. Unha expresión gráfica ben visual que, sabendo compoñelo elegantemente cunha tipografía e elementos visuais, pode amosar os pasos dados por un servizo ou produto ao longo do tempo.

Estas 29 liñas de tempo que atoparás a continuación son a partir de liñas de tempo verticais como serían os horizontais. Xa atoparás o mellor que se adapte ás túas necesidades para localizalo nunha páxina do sitio web que estás a desenvolver para un cliente ou para ti. Imos cunha colección de cronoloxías moi interesantes que son moi agradables visualmente.

Cronoloxía desprazándose

Cronoloxía de desprazamento

Unha liña de tempo que está en código HTML, CSS e JavaScript para posicionarse con graza como bo minimalista que destaca o vermello para a lista de anos á esquerda e o negro para o tipo de letra e H2s. O mellor desta liña de tempo é que, ao percorrer a páxina, o cambio de ano farase automaticamente. Gran acabado, deseño e resultado.

Cronoloxía en CSS

Propiedades da liña de tempo CSS

Esta liña de tempo usa o código CSS para incluso poder configurarse correctamente nalgunhas das súas propiedades. Non ten desprazamento como o anterior, pero caracterízase por unha serie de cadrados e unha cor azul para darlle outro toque moi elegante e unirse á lista de liñas de tempo desta publicación.

Deslizante de liña de tempo sensible

Deslizante de liña de tempo sensible

Esta liña do tempo está feita coa biblioteca Swiper JS para incluír código HTML, CSS e JavaScript. Non ten desprazamento a medida que avanzamos pola páxina web, pero si coloca os anos no lado dereito e un botón co que podemos ir ao seguinte, ademais de poder usar o punteiro do rato para ir a un ano específico. Gran animación en cada unha das transicións.

Cronoloxía avanzada

Cronoloxía avanzada

Esta liña do tempo destaca por usar HTML, CSS e JavaScript, ademais de entra no monocolor, precisamente nos tons vermellos. Tamén se caracteriza polo uso dun botón que lle permite avanzar ou retroceder na liña de tempo marcada por este excelente código de resultado para ser bastante minimalista.

Cronoloxía con cabeceira fixa e Flexbox

Cronoloxía corrixida

Código HTML e CSS para unha cabeceira fixa que permanecerá fixado no momento en que fagamos o desprazamento na páxina. De gran sutileza ser unha liña do tempo de gran interese para calquera desenvolvedor actual que queira ser resaltado polos estándares actuais de deseño web.

Cronoloxía do proxecto

Cronoloxía do proxecto

Esta liña de tempo usa CSS e HTML para presentar unha liña de tempo importante para usar ese período de tempo específico para un proxecto. A medida que o desprazamos vai pasando os días da semana, polo que é perfecto implementalo para ferramentas de colaboración feitas pola propia compañía.

Timeline

Timeline

Unha liña do tempo en HTML, CSS e JavaScript que destaca do resto para o tema visual. E é que, ao percorrer a liña de tempo vertical, cada vez que atopamos unha nova fotografía na liña de tempo, converterase na imaxe de fondo da páxina web onde colocamos este código.

Hyperloop

Hyperloop

Hyperloopu é unha liña do tempo que máis ben destaca polo deseño empregado e por estar programado nada máis que en HTML e CSS. Caracterízase polo uso de diferentes tamaños no tipo de letra do texto cunha liña vertical e unha serie de caixas que marcan cada momento importante da liña do tempo.

Cronoloxía vertical

Cronoloxía vertical

Unha liña de tempo de intervalo que distánciase do resto polo seu toque visual. Ten un fondo de degradado moi actual no deseño e unha serie de caixas que marcan cada un destes intervalos. Programado en CSS e HTML.

Cronoloxía en Flexbox

Flexbox da liña do tempo

Unha das mellores liñas de tempo rematadas e iso baséase en cartas para incluír toda a información que precisamos para ese intervalo de tempo. Tamén desenvolvido en HTML e CSS, hai que ter en conta que todas as tarxetas deben ter a mesma altura e ancho para calcular o espazo para pantallas máis grandes.

Cronoloxía en DIV

Cronoloxía div

Unha liña do tempo minimalista no deseño e así foi desenvolvido só en HTML e CSS, polo que a súa implementación pode ser moi rápida. É perfectamente adecuado para expresar unha liña de tempo nun medio de información debido ao seu acabado monocromo.

Cronoloxía en CSS e HTML

Cronoloxía CSS

Podes colocar Imaxes de tamaño 400 × 300 nesta liña de tempo distinguida pola cor verde das liñas e o texto das datas e dos días. Non ten animacións e caracterízase polo seu sinxelo deseño a todos os niveis.

Cronoloxía de comentarios e comentarios

Comentarios da cronoloxía

Unha liña do tempo moi diferente das demais por permitir poñer tarxetas coas fotos dos usuarios, ou polo menos esa é a intención nun principio. Cun gran estilo visual, as cartas usan o sombreado para unha liña do tempo bastante plana sen animacións.

Mañá de cronoloxía en HTML e CSS

Cronoloxía responsiva

Un cronograma perfecto para responder a iso caracterízase por ser HTML, CSS e ofrecer unha liña de tempo bastante sinxela pero moi móbil.

IU da liña de tempo

Timeline

Este código en HTML e CSS funciona perfectamente para presentar a xornada laboral dun adestramento. Responde cunha imaxe de cabeceira e unha serie de botóns que a mostran dun xeito moi claro e limpo no aspecto visual.

Cronoloxía só en CSS

Cronoloxía CSS

Esta liña do tempo caracterízase por estar en CSS e por un serie de cores ben escollida: vermello e verde. Verde para cubrir toda a páxina completamente, branco para texto e liñas divisorias e vermello para distinguir o intervalo de tempo no que estamos. Podemos facer clic en cada intervalo para colocalo cunha caixa que o rodea e o destaca.

Cronoloxía responsiva V3

Cronoloxía responsiva V3

A primeira das liñas horizontais da lista en HTML, CSS e JavaScript. Visualmente destaca polo uso de cores negras e grises para colocar unha liña horizontal cunha serie de puntos. Cada intervalo resáltase cun maior peso na fonte e no contido do texto.

Cronoloxía situada en cor

Anidado

Unha das liñas horizontais horizontais a maior calidade visual da lista. Unha liña de tempo ben interactiva con animacións moi sutís e ben presentadas para ofrecer unha excelente experiencia de usuario cada vez que se preme un dos intervalos de tempo. Faise con HTML CSS / Sass e JavaScript / TypeScript (jquery.js).

Cronoloxía do historial sensible

Historia sensible

Unha liña do tempo perfecta para amosar os diferentes eventos en imaxes dunha franxa horaria da historia. É horizontal e sensible ao ser desenvolvido en HTML, CSS e JavaScript.

Cronoloxía do grupo

Grupo de cronoloxía

Esta liña do tempo destaca por unha boa transición realizado cunha animación horizontal. De gran cor e cun deseño exquisito para resaltar cada un dos intervalos de tempo. Está en HTML, CSS e JavaScript para presentar unha serie de tarxetas superpostas a unha imaxe de fondo representativa.

Cronoloxía horizontal CSS e HTML

Envato horizontal

Feito por el coñecido Envato Tuts +, preséntasenos unha liña temporal horizontal cunha serie de tarxetas limpas e básicas no deseño. Cores planas e unha liña horizontal cunha serie de puntos vermellos que entrelazan cada intervalo.

Cronoloxía CSS, HTML e slick.js 

Cronoloxía pastel

Tonos pastel no deseño para unha liña do tempo que destaca pola presentación de cada unha das imaxes mostrando cada intervalo de tempo. É a transición entre cada unha das imaxes e intervalos o que fai destacar esta liña do tempo.

Secuencia de liña de tempo V1

Secuencia da liña do tempo

Unha liña do tempo que destaca botóns en cada liña vertical de cada intervalo para vincular unha imaxe de fondo a pantalla completa cada vez que prememos sobre unha.

Cronoloxía horizontal HTML CSS

Cronoloxía HR

Non poderás facer clic en ningunha parte desta liña de tempo que resalte un deseño exquisito pola sabia elección da paleta de cores e unha serie de bocadillos para cada unha das liñas do tempo. Non hai animacións, pero visualmente é moi agradable á vista.

Cronoloxía Codyhouse

Cronoloxía CodyHouse

Esta liña do tempo presentado por Codyhouse é de cor única en deseño e desenvólvese en HTML, CSS e JavaScript. Presenta unha liña minimalista cunha serie de puntos como intervalos para facer clic e provoca a animación horizontal de menos de medio segundo. Sinxelo, pero potente.

Cronoloxía horizontal

Cronoloxía horizontal

Outra cronoloxía feita en HTML, CSS e JavaScript. Caracterizado pola cor única, contén un deseño elegante cunha cor verde para poñer o encaixe en cada un dos puntos que representan os intervalos de tempo. Cada vez que prememos un, comeza unha animación lateral moi suave.

Cronoloxía sen nome

Cronoloxía sen nome

A única liña de tempo negra da lista inferior. Despois usa diferentes cores para diferenciar cada ano e o texto ao mesmo tempo que os seus límites. Ten unha animación excepcional para pasar entre cada un dos textos.

Cronoloxía

Cronoloxía

Esta liña do tempo pon o acento na cor verde ser totalmente estático.

Outra liña do tempo horizontal

Outra liña do tempo

Pode coloca unha imaxe preto da pantalla completa para unha liña do tempo que destaca polo uso do azul e gris máis unha serie de círculos que representan cada ano.

Non o perdas outra serie de menús en CSS e HTML.


O contido do artigo adhírese aos nosos principios de ética editorial. Para informar dun erro faga clic en aquí.

Sexa o primeiro en opinar sobre

Deixa o teu comentario

Enderezo de correo electrónico non será publicado. Os campos obrigatorios están marcados con *

*

*

  1. Responsable dos datos: Miguel Ángel Gatón
  2. Finalidade dos datos: controlar SPAM, xestión de comentarios.
  3. Lexitimación: o seu consentimento
  4. Comunicación dos datos: os datos non serán comunicados a terceiros salvo obrigación legal.
  5. Almacenamento de datos: base de datos aloxada por Occentus Networks (UE)
  6. Dereitos: en calquera momento pode limitar, recuperar e eliminar a súa información.