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:

Twitter

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:

Campo de formulário como no Twitter

Espero que tenham gostado da dica! Conte-nos sua experiência nos comentários logo abaixo!

(via)

Gostou? Compartilhe!
Em 10/03/2011 às 11:20 por em Dicas
Artigo Anterior

Deixe seu comentário