HTML Efeito no input do login?

Daniel Pereira Simão · 29 de junho de 2020

Oi boa noite tudo bem,

gostaria de saber como faço pra add o efeito no input de login, que quando selecionar pra digitar algum dado

o placeholder some é fica um nome menor em cima apos uma transição.

exemplo

o lado esquerdo tá normal, o direito e quando clica no input rola uma transição e o nome sobe e fica menor la em cima...

igual aqui https://www.consumidorpositivo.com.br/

GabrielSennaMs · 29 de junho de 2020

@Vera Lucia Ferreira Simão Esse efeito de Input é padrão do MDC(Material Desing Components).

Fazer esse efeito na mão vai custar um bom tempo, você pode adquiri ele incorporando a base do M.D no seu projeto, ou usando uma estrutura que usa o M.D como base, o site em questão usa a estrutura Materialize, que é incorporada através de CDN.

HTML Exemplo:

<!DOCTYPE html>
<html style="height: 100%;">
  <head>
    <title>Exemplo</title>
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materia>
    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/ma>
  </head>
  <body style="height: 100%; display: flex;">
    <div class="z-depth-2" style="margin: auto; width: 300px; padding: 1em 2em;">
      <div class="input-field">
        <input type="text" id="input">
        <label for="input">Exemplo1</label>
      </div>
      <div style="margin-top: 3em;"  class="input-field">
        <input placeholder="Exemplo 2" type="text" id="input">
        <label for="input">Exemplo 2</label>
      </div>
    </div>
  </body>
</html>

Resultado:

Gustavo Augusto Lopes · 3 de julho de 2020

Não é algo complicado, o esquema é que ao invés de usar um placeholder, você terá de usar um <span> ou coisa do tipo pra exibir um texto, colocar ele com position: absolute para ele ficar em cima do input, e fazer um input:focus + span, com isso você coloca o que vai ser alterado no span quando o input estiver em focus, basta reajustar o margin top para que o span fique acima do input, e o font-size diminuir.

Por fim a chave de tudo é o transition: all 300ms que deve ser inserido no elemento do span, onde todas as transições realizadas nele vão levar 300ms, tempo reajustável de acordo com sua preferência.

Segue exemplo do código na prática:

https://jsfiddle.net/Ted2370/txfz5bes/22/

Obs.:Desculpa a má formatação da resposta, sou novato no server >.< mas espero ter ajudado!