Efeito float label animado com CSS3 – Igual ao do novo login do Google

Design

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.

E, como sempre, o link, com o exemplo do jsFiddle, se você deseja apenas experimentar e treinar um pouco:

Compartilhe se você achou legal!

Entre para o Grupo Design e Programação no Facebook
Velho Bit