Neste artigo veremos como fazer uma linha vertical no seu projeto HTML, apenas com CSS de uma forma prática e rápida, que fica semelhante a um elemento hr.
Fala programador(a), tudo certo? Bora aprender a criar uma linha vertical!
A ideia de criar uma linha vertical é completamente diferente de só por um elemento semelhante ao hr
Que para quem não sabe exibe uma linha na horizontal, mas eu particularmente não aconselho pois acaba te limitando muito
Já da forma que veremos neste artigo, você poderá criar também linhas horizontais da forma que controle todos os aspectos dela com o CSS
Vamos então a o exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Como criar uma linha vertical com CSS</title>
<meta charset="utf-8">
</head>
<body>
<div id="linha-vertical"></div>
<div id="linha-horizontal"></div>
</body>
</html>Criamos aqui um HTML bem básico, com duas divs que vão representar nossas linhas: a vertical e a horizontal
Quer se especializar em Desenvolvimento Web? Veja o nosso catálogo de cursos.
Agora vamos ao CSS para realizar estas linhas:
#linha-vertical {
height: 200px;
border-right: 1px solid red;
}
#linha-horizontal {
width: 300px;
border: 1px solid #000;
}Veja o que é representado no navegador:
Agora vamos ver em detalhes o que aconteceu no código, simplesmente criamos uma div e determinamos uma altura, se a linha for vertical, ou largura, se a linha for horizontal
Isso vai servir para que nossa linha tenha o tamanho que julgarmos necessário
Por fim, determinamos uma borda que é a espessura da linha e também podemos definir a sua cor
E então a linha estará pronta, tanto na forma vertical quanto na horizontal 🙂
Conclusão
Neste artigo vimos omo criar uma linha vertical e também linhas horizontais com CSS puro
Apenas precisamos determinar uma largura ou altura, em uma div
E depois utilizar a regra de border para manipular a espessura e cor da nossa linha
Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube
putz man, um negócio tão simples de fazer mas que a gente tem dificuldade de elaborar sozinho!
opa Jadson, com a prática e vivência começa a ficar mais natural, sem se preocupa =)