Tag: input

Como fazer efeito float label animado com CSS3 puro
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:

Telefone

Nome de Usuário

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:
```
<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:
```
.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;
  -webkit-transition: all .3s ease-out;
  -moz-transition: all .3s ease-out;
  -webkit-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;
  -webkit-transition: all .3s ease-out;
  -moz-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!
17 de dezembro de 2018
Google I/O 2018 – Divulgada a Data do Evento

A Google confirmou indiretamente, a partir de um material de divulgação com ludificação, que sua próxima conferência de desenvolvedores, o Google I/O, vai acontecer entre os dias 8 e 10 de Maio.

Para o anúncio, a Google fez um jogo de exploração, baseado na mesma tecnologia do StreetView, que traz também uma data curiosa: 5 de Agosto. Esse dia é o dia nacional da irmã, uma referência a cidade próxima a Mountain View, mas também foi a data que ocorreu o I/O Extended em 2017. Vale lembrar que Agosto também é um mês comum para os lançamento oficial de versões do Android.

Todos os anos a conferência traz novidades acerca de novas plataformas de desenvolvimento, integração, novos produtos e serviços, além de novidades acerca de seus principais sistemas operacionais Chrome OS e Android.

Curiosidade

Como todos os anos, os curiosos não estão interessados nas novas funcionalidades e novas tecnologias, mas sim na questão mais importante que movimenta todo o mercado do Android: o nome da nova versão.

Devido a ser possível encontrar um bolo com diversas rodelas de abacaxis, sugere-se que o nome do próximo Android possa ser Pineapple Cake ou algo parecido. Analistas acreditam que esse nome pode ser uma mudança no paradigma do sistema operacional da Google.

Todavia, também podemos ver na sala da cozinha diversas cestas com inhame e batata-doce 🤷‍♂️.

Como notícias do The Verge, Google e 9 to 5 Google.

25 de janeiro de 2018

Tag: input

Como fazer efeito float label animado com CSS3 puro

Agora… como fazer?

Google I/O 2018 – Divulgada a Data do Evento

Curiosidade