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.
Preview
Hospedei o projeto no Github Pages, veja o projeto clicando aqui.
Vídeo tutorial
Veja um vídeo tutorial, com todo o passo a passo e explicação de todos os itens do projeto:
Código fonte
O código fonte está no meu Github
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Desenvolvimento Web com HTML, CSS e JavaScript
Aprenda a testar Aplicações Javascript
Referências
https://developer.mozilla.org/pt-BR/docs/Web/CSS/Pseudo-elements