Tela de login pronta HTML CSS

Tela de login pronta HTML CSS

Este tutorial mostra como criar uma Tela de login animado com html e css.

Animações CSS tornam possível animar transições de um estilo CSS para outro. Animações se consistem de dois componentes: um estilo descrevendo a animação e um set de keyframes que indicam o estado final e inicial do estilo CSS da animação, bem como possíveis waypoints intermediários ao longo do caminho.

Estrutura Base Html e Css

A estrutura base do nosso pequeno projeto vai ser composto por apenas dois arquivos, por ser apenas dois arquivos, não será algo muito complexo de realizar, o primeiro arquivo será o index.html e o segundo style.css.

Portanto, crie uma pasta CSS, para inserir o arquivo style.css, a mesma regra serve se você estiver usando scripts crie pastas para organizar o seu projeto seja qual for organização é fundamental para organização e manutenção no futuro.

Nesta seção, projetaremos uma estrutura simples na tag <div>. 

temos dentro da tag <div> as tags <h2>, <form>, <input>, e <a>.

Essas tags usaremos para criar a nossa Tela de login com html e css.

Vamos Adicionar o HTML

<div class="wrapper fadeInDown">
  
  <div class="content-login">

      <h2 class="active"> Login </h2>

      <form class="box-login" method="post" action="#">
        <input type="email" id="email" class="campo" name="email" placeholder="E-mail">
        <input type="text" id="password" class="campo" name="senha" placeholder="Senha">
        <input type="submit" class="botao" value="Entrar">
      </form>


      <div class="box-lembrar-senha">  
        <a class="link" href="#">Lembrar Senha ?</a>
      </div>

  </div><!--Form Content-->

</div><!--wrapper-->

Estrutura Código CSS

Para conseguirmos um design mais atraente, vamos adicionar algumas propriedades  CSS  para as tags que foram colocadas na sessão HTML que usamos.

Portanto, você pode criar um arquivo style.css, coloque todo o código que se encontra logo mais abaixo.

Nesta seção, usaremos algumas propriedades  CSS para estilizar a nossa Tela de login com css.

/* Reset */
*{  
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box;
  
}

html { background-color: #404040; }
body { font-family:"Poppins", sans-serif; height:100vh; }

h2 {

  text-align: left;
  font-size: 16px;
  margin-bottom: 10px;
  color: #0d0d0d;
  border-bottom: 1px solid #f6f6f6;
  padding: 15px 15px;
  width: 100%;
  float: left;

}

.wrapper {
  
  display: flex;
  align-items: center;
  flex-direction: column; 
  justify-content: center;
  width: 100%;
  min-height: 100%;

}

.content-login {

  -webkit-border-radius: 4px;
  border-radius: 10px 10px 10px 10px;
  background: #fff;
  padding: 30px;
  width: 95%;
  max-width: 320px;
  position: relative;
  padding: 0px;
  -webkit-box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  box-shadow: 0 30px 60px 0 rgba(0,0,0,0.3);
  text-align: center;

}

.box-login { 
  
  width: 100%;
  float: left;
  padding: 10px;
 
}

.box-lembrar-senha {

  width:100%;
  float:left;
  background-color: #f6f6f6;
  border-top: 1px solid #dce8f1;
  padding: 25px;
  text-align: center;
  -webkit-border-radius: 0 0 10px 10px;
  border-radius: 0 0 10px 10px;
}


.botao {
  
  width:100%;
  display: block;
  float:left;
  background-color: #ed9d56;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 15px 80px;
  text-align: center;
  font-size:18px;
  -webkit-border-radius:4px;
  border-radius:4px;
  transition: 0.3s;


}

.botao:hover  { background-color: #404040; }

.campo {
  
  background-color: #f6f6f6;
  border: none;
  outline: none;
  color: #0d0d0d;
  padding: 10px 5px;
  text-decoration: none;
  font-size: 16px;
  margin-bottom: 10px;
  width: 100%;
  border: 2px solid #f6f6f6;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  float: left;
  transition: 0.3s;

}

.campo:focus {
 
  background-color: #fff;
  color:#ed9d56;

}

.campo:placeholder {

  color: #cccccc;

}

.link {
    
  color: #ed9d56;
  display:inline-block;
  text-decoration: none;
  transition: 0.3s;

}

.link:hover { color:#404040; }

/* Animação */
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

/* Animação Fade-in*/
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fadeIn {

  opacity:0;
  -webkit-animation:fadeIn ease-in 1;
  -moz-animation:fadeIn ease-in 1;
  animation:fadeIn ease-in 1;

  -webkit-animation-fill-mode:forwards;
  -moz-animation-fill-mode:forwards;
  animation-fill-mode:forwards;

  -webkit-animation-duration:2s;
  -moz-animation-duration:2s;
  animation-duration:2s;

}

Combinando as Duas seções acima Html e Css temos o seguinte Resultado!

Veja o Resultado baixo!

Tela de login pronta HTML CSS

Baixar Código Veja Funcionando

Conclusão

Neste artigo, você aprendeu o passo a passo de como criar uma tela de login com html e css, existem diversas formas de criar telas de login com efeitos, cores, formas e animações diferentes.

Fica o desafio para você tentar criar um novo design do zero a criatividade é sua.

faça um exemplo e comente aqui em baixo e deixe um link do seu desafio.

A imaginação é mais importante que o conhecimento. O conhecimento é limitado, enquanto a imaginação abraça o mundo inteiro, estimulando o progresso, dando à luz à evolução.– (Albert Einstein)