No post anterior, eu mostrei como fazer aquele efeito de label float do Material Design. Eis que esta semana eu me deparo com o novo input do login do Google e achei bem legal, mas pensei que ninguém ia se interessar.
Como vi uma pergunta em um grupo do Facebook, resolvi rapidinho então fazer uma variação do que foi feito no anterior, para atingir o mesmo efeito do input login do novo login do Google. Ah e, mais uma vez, sem javascript .
HTML e CSS
Se precisarem de alguma explicação mais aprofundada, dê um olhada no artigo anterior. Só uma observação importante é que o top, do label, deverá ser ajustado de acordo com o tamanho da letra e a tipografia usada, pois tipografias diferentes mudam a sensação de tamanho.
xxxxxxxxxx
<div class="label-float">
<input type="text" placeholder=" ">
<label>Telefone</label>
</div>
<br>
<div class="label-float">
<input type="text" placeholder=" " required="">
<label>Nome de Usuário</label>
</div>
xxxxxxxxxx
.label-float{
position: relative;
padding-top: 13px;
}
.label-float input{
border: 1px solid lightgrey;
border-radius: 5px;
outline: none;
min-width: 250px;
padding: 15px 20px;
font-size: 16px;
transition: all .1s linear;
transition: all .1s linear;
transition: all .1s linear;
appearance:none;
}
.label-float input:focus{
border: 2px solid #3951b2;
}
.label-float input::placeholder{
color:transparent;
}
.label-float label{
pointer-events: none;
position: absolute;
top: calc(50% - 8px);
left: 15px;
transition: all .1s linear;
transition: all .1s linear;
transition: all .1s linear;
background-color: white;
padding: 5px;
box-sizing: border-box;
}
.label-float input:required:invalid + label{
color: red;
}
.label-float input:focus:required:invalid{
border: 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;
top: 0;
color: #3951b2;
}
E, como sempre, o link, com o exemplo do jsFiddle, se você deseja apenas experimentar e treinar um pouco:
Compartilhe se você achou legal!