Aplique o estilo do Twitter em seus formulários
Esta é uma dica bastante simples e rápida para deixar os campos de texto de seus formulários da forma como eles aparecem no site de microblog mais famoso do mundo, o Twitter. Sabe aquela borda azulada quando o campo está em destaque com as bordas arredondadas? É isso que você aprenderá a fazer nas próximas linhas.
Tudo o que precisamos é do seguinte código adicionado ao seu arquivo CSS:
input {
transition: all 0.30s ease-in-out;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
border:#999 1px solid;
outline:none;
}
input:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 5px rgba(81, 203, 238, 1);
}
Agora salve e desfrute do resultado:
Espero que tenham gostado da dica! Conte-nos sua experiência nos comentários logo abaixo!
(via)
