chronoline.png
Vídeos

Como criar Chronoline usando css

C. Junior

Como criar Chronoline usando CSS.

Neste tutorial mostro através de um vídeo tutorial Como criar Chronoline usando css e Html .

O que á um Chronoline?

 

O Chronoline nada mais é que um componente utilizado para mostrar ao usuário uma linha do tempo de determinado assunto ou os passos de algum tutorial que estamos tentando explicar para o usuário.

A utilização de um Chronoline é muito útil, pois de forma visual conseguimos passar a ordem exata do que estamos tentando explanar e fica muito mais fácil para o usuário entender.

Desta forma em que situações podemos utilizar o Chronoline?

Um exemplo onde o Chronoline é bastante utilizado é para mostrar a um usuário o status ou ordem de uma compra que ele efetuou.

Usando o Chronoline podemos exibir de forma visual os status em que se encontra a compra que ele acabou de efetuar do inicio da ordem de compra até a entrega do produto adquirido.

Com base na situação explanada acima vamos criar o nosso Chronoline, onde iremos simular a compra de um produto.

Então os passos do Chronoline serão a ordem de compra, logo após vira o processamento da compra, depois o envio do item comprado e por ultimo a entrega do produto..

 

 

 

No vídeo acima tem um breve tutorial que mostro como construir e estilizar o ChronoLine e logo abaixo mostro o  código usado para implementar o componente.

Com base Primeiro vamos criar a  estrutura da página e do componente, conforme mostrado abaixo:

 

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<title>Chrono Line</title>

</head>

<body>

<div class="container">

<h2 class="title">Chrono Line</h2>

<div class="card">

<div class="chronoline">

<div class="chronoline-event">
<div class="chronoline-event-opposite">&nbsp;</div>
<div class="chronoline-event-separator">
<div class="chronoline-event-marker"></div>
<div class="chronoline-event-connector"></div>
</div>
<div class="chronoline-event-content">
Ordem
</div>
</div>

<div class="chronoline-event">
<div class="chronoline-event-opposite">&nbsp;</div>
<div class="chronoline-event-separator">
<div class="chronoline-event-marker"></div>
<div class="chronoline-event-connector"></div>
</div>
<div class="chronoline-event-content">
Processando
</div>
</div>

<div class="chronoline-event">
<div class="chronoline-event-opposite">&nbsp;</div>
<div class="chronoline-event-separator">
<div class="chronoline-event-marker"></div>
<div class="chronoline-event-connector"></div>
</div>
<div class="chronoline-event-content">
Enviado
</div>
</div>

<div class="chronoline-event">
<div class="chronoline-event-opposite">&nbsp;</div>
<div class="chronoline-event-separator">
<div class="chronoline-event-marker"></div>
</div>
<div class="chronoline-event-content">
Entregue
</div>
</div>
</div>
</div>

</div>

</body>

</html>

 

Em seguida vamos estilizar os componentes da página, abaixo mostro os códigos de estilização usados neste tutorial:

*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #e1dddd;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
}
.title {
padding: 0.8rem 1rem;
border-radius: 6px;
background: #17193b;
text-align: center;
color: orange;
font-weight: 900;
font-size: 24px;
}
.card { 
background: #ffffff;
padding: 2rem;
border-radius: 4px;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.chronoline {
min-width: 300px;
display: flex;
flex-grow: 1;
flex-direction: column;
}
.chronoline-event {
display: flex;
position: relative;
min-height: 70px;
}
.chronoline-event:nth-child(even) {
flex-direction: row-reverse;
}
.chronoline-event:nth-child(odd) .chronoline-event-opposite {
text-align: right;
}
.chronoline-event:nth-child(odd) .chronoline-event-content {
text-align: left;
}
.chronoline-event:nth-child(even) .chronoline-event-opposite {
text-align: left;
}
.chronoline-event:nth-child(even) .chronoline-event-content {
text-align: right;
}
.chronoline-event-opposite,
.chronoline-event-content {
flex: 1;
padding: 0 1rem;
line-height: 1;
}
.chronoline-event-separator {
flex: 0;
display: flex;
align-items: center;
flex-direction: column;
}
.chronoline-event-marker {
display: flex;
align-self: baseline;
border: 2px solid #2196f3;
border-radius: 50%;
width: 1rem;
height: 1rem;
background-color: #fff;
}
.chronoline-event-connector {
width: 2px;
background-color: #dee2e6;
flex-grow: 1;
}

 

 

Ao executar o código acima irá gerar um layout igual a figura abaixo:

 

Como criar Chronoline usando css
chronoline.png

 

 

Aqui está um pequeno vídeo mostrando como ficou o componente que acabamos de criar:

https://youtu.be/L3iHrd2v94g

 

Se você preferir visualizar o código fonte do componente que acabamos de criar no github, só acessar o link abaixo:

Código Fonte

Você pode gostar também

Como estilzar um Calendário Html

Como estilzar um Calendário Html

C. Junior
tabela estilizada

Como criar tabela estilizada

C. Junior
spinner-vertical

Como criar um Spinner Vertical com html

C. Junior

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *