Pular para o conteúdo

Programando Soluções

Tela de Login HTML + CSS + Javascript

  • por
login

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

Este conteúdo te ajudou de alguma forma?

Marcações:
Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
herabet giriş herabet giriş Herabet giriş etorobet giriş deneme bonusu veren siteler deneme bonusu veren siteler istanbul evden eve nakliyat Evden eve taşımacılık pompino e scopata appena sveglia 2 girls fucked together on the couch