Tela de Login HTML + CSS + Javascript - Programando Soluções

Veja nesse artigo

Introdução

Criar projetos como tela de login é excelente para treinar e aprender novos conceitos.

Embora seja um projeto relativamente simples, é possível fazer de diferentes maneiras, tanto na parte da interface, quanto na parte do código.

E cada diferente maneira, é utilizada uma técnica, e com isso é possível obter mais aprendizados a cada vez.

Variáveis no CSS

Utilizar variáveis no CSS é vantajoso por alguns motivos.

Imagine uma situação onde a cor principal do site é azul, porém o cliente pediu a alteração para verde, sem as variáveis, terá que trocar em todos os locais que usam o azul. Com as variáveis é só trocar na declaração.

Também ajuda a manter um padrão no desenvolvimento, pessoas diferentes podem colocar cores diferentes, e as variáveis ajudam a manter esse padrão.

Dependendo do editor de código, ele pode ajudar a preencher fornecendo o autocomplete das variáveis, no meu caso utilizei o VsCode e ele autocompleta as variáveis.

Utilitários CSS

Outra parte que ajuda durante o desenvolvimento, é deixar declarado classes para indicar usos dentro do projeto.

Por exemplo, os campos do login, tem uma distancia padrão entre eles, por isso criei uma classe de margem-bottom para manter o padrão de distanciamento entre eles.

Pseudoelementos

Os pseudoelementos foram utilizados no formulário de login para colocar a linha de baixo e fazer o efeito de cada campo.

O pseudoelemento, faz parte do elemento principal, e com ele é possível estilizar uma parte específica do elemento, por exemplo, antes ou depois dele, sem precisar criar novos elementos.

Neste caso de uso, tanto o efeito do texto quanto a linha, fazem parte do elemento, e estão antes e depois dele, com isso é possível estilizar até chegar ao resultado esperado.

Ilustração e fontes

É importante ter ferramentas para desenvolver algo, quanto mais ferramentas, sabendo utilizá-las, pode te dar um leque maior de opções durante o desenvolvimento.

Para a imagem, utilizei o site StorySet e pesquisei por login, tem muitas ilustrações bacanas para utilizar, e elas deixam a página com um estilo mais agradável.

A fonte utilizei a Poppins, e obtive utilizando o Google Fonts, optei por fazer o download, para trabalhar melhor com diversos estilos da mesma fonte.

Outros recursos e técnicas

Foi utilizado outros recursos e técnicas como a estrutura de uma tela de login, manutenção das classes para aplicar os estilos, seletores de hover e focus, efeito do campo parecido com o do MaterializeCSS e muito mais.