O último post sobre como criar um efeito ON/OFF em um checkbox usando CSS3 puro fez muito sucesso. Dessa forma, pensei o que mais poderia ser legal para fazer com CSS3. Analisando um pouco o comportamento do Android, me lembrei de um componente bem interessante que é o input com um label float animado. Basicamente, ao preencher o conteúdo, o label sobe e vai para um pouco acima do input, como no exemplo abaixo:
Agora… como fazer?
O segredo está novamente nas pseudoclasses e operadores. Graças as pseudoclasses eu posso definir, com alguns gatilhos, o comportamento de um determinado elemento HTML.
No caso, esse gatilho é o placeholder, então é fundamental que o input possua um placeholder (vazio ou não) para criar o efeito. Pois o que identifica que algo foi preenchido ou não é justamente o placeholder. Sem o placeholder definido, o efeito não funciona. A pseudoclasse referente ao required também é usada em nosso exemplo:
xxxxxxxxxx
<div class="label-float">
<input type="text" placeholder=" "/>
<label>Telefone</label>
</div>
<div class="label-float">
<input type="text" placeholder=" " required/>
<label>Nome de Usuário</label>
</div>
Já para o efeito de transição, usaremos o transition e o comportamento do absolute que, por definição, tem seus eixos referentes ao pai, no caso desse ser relative. Então basta usar o CSS abaixo:
xxxxxxxxxx
.label-float{
position: relative;
padding-top: 13px;
}
.label-float input{
border: 0;
border-bottom: 2px solid lightgrey;
outline: none;
min-width: 180px;
font-size: 16px;
transition: all .3s ease-out;
transition: all .3s ease-out;
transition: all .3s ease-out;
appearance:none;
border-radius: 0;
}
.label-float input:focus{
border-bottom: 2px solid #3951b2;
}
.label-float input::placeholder{
color:transparent;
}
.label-float label{
pointer-events: none;
position: absolute;
top: 0;
left: 0;
margin-top: 13px;
transition: all .3s ease-out;
transition: all .3s ease-out;
transition: all .3s ease-out;
}
.label-float input:required:invalid + label{
color: red;
}
.label-float input:focus:required:invalid{
border-bottom: 2px solid red;
}
.label-float input:required:invalid + label:before{
content: '*';
}
.label-float input:focus + label,
.label-float input:not(:placeholder-shown) + label{
font-size: 13px;
margin-top: 0;
color: #3951b2;
}
Como sempre, estou disponibilizando o exemplo completo no JsFiddle!
Gostou? Então curta a página no Facebook e compartilhe com os coleguinhas!