Fazer o Label do formulário subir.
Animando a Tag label dos campos inputs.
Você já deve ter visto alguns formulários que ao clicar no
campo input a palavra de dentro que é o título subir.
Isso é bem simples e rápido de ser feito, mas somente vai
funciona para formulário onde a Tag label fica abaixo da Tag input.
Criando um formulário simples.
Este exemplo vai conter um campo de nome, senha e um botão entrar.
Será criado uma animação que vai fazer a tag label subir e
para ficar mais legal vamos colocar um ícone de confirmado.
Copie o HTML abaixo.
<form method="POST"
class="formBox">
<h2>Login</h2>
<div
class="inputBox">
<input
type="text" name="nome" required="">
<label>Nome
do usuário</label>
</div>
<div
class="inputBox">
<input
type="password" name="senha" required="">
<label>Senha</label>
</div>
<input
type="submit" name="entrar" value="Entrar">
</form>
Criando o estilo CSS para animar os elementos.
Primeiro vamos criar o estilo da tag form colocando uma cor
de fundo e definindo um tamanho.
/*estilo do container do formulario */
.formBox{
border: 1px solid
rgba(255, 255, 255, 0.6);
margin: 90px 0;
width:
400px;
padding:
20px;
background-color:
rgba(0,0,0, 0.7);
box-sizing:
border-box;
box-shadow:
6px 8px 25px 12px rgba(0,0,0,0.45);
border-radius:
10px;
position:
relative;
}
.formBox h2{
margin: 0 0 20px
0;
color:
#fff;
}
Preparando os elementos.
Agora vamos ter que fazer a DIV que guarda o input e o label
ser de posição relativa para que a tag label seja de posição absoluta.
/*estilo do input e label*/
.inputBox{
position:
relative;
}
.inputBox input{
width:
100%;
padding:
10px 0;
font-size:
1.0em;
color:
#fff;
border:
none;
border-bottom:
1px solid #fff;
margin-bottom:
30px;
outline:
none;
background:
transparent;
}
.inputBox label{
position:
absolute;
top: 0;
left:
0;
padding:
10px 0;
font-size:
1.1em;
color:
#fff;
pointer-events:
none;
transition:
0.4s;
}
Melhorando o visual e animando
Agora vamos fazer a animação acontecer no evento de focus
e aproveitar para trocar a cor colocando assim em destaque.
Com isso a tag label vai se movimenta.
/*animando o label*/
.inputBox input:focus ~ label,
.inputBox input:valid ~ label{
top:
-20px;
left:
0;
color:
#ffeb3b;
text-shadow:
0px 0px 12px rgba(255, 255, 255, 1);
font-size:
0.8em;
}
Estilo final para verificar.
Essa parte é opcional e a verificação será exibir um ícone verde.
/*estilo extra que vefirica se o campo está vazio*/
.formBox .inputBox input ~ label:after,
.formBox textarea ~ label:after {
visibility: hidden;
}
.formBox .inputBox input:focus ~ label:after,
.formBox .inputBox textarea:focus ~ label:after,
.formBox .inputBox input:not(:placeholder-shown) ~
label:after,
.formBox .inputBox textarea:not(:placeholder-shown) ~
label:after {
visibility: visible;
}
.formBox .inputBox input:not(:placeholder-shown):valid ~
label:after,
.formBox .inputBox textarea:not(:placeholder-shown):valid ~
label:after {
content: ' ✔️';
}
.formBox .inputBox input:invalid ~ label:after,
.formBox .inputBox textarea:invalid ~ label:after {
content: ' ';
}
É somente isso, com poucas linhas de código criamos um
formulário bonito que vai fazer muita diferença para a experiencia do usuário.
Confira também como usar os filtros nas imagens usando CSS.
https://desenvolvedor-web.blogspot.com/2018/10/imgem-com-filtro-usando-css.html
Confira também como usar os filtros nas imagens usando CSS.
https://desenvolvedor-web.blogspot.com/2018/10/imgem-com-filtro-usando-css.html
Comentários
Postar um comentário