domingo, 26 de septiembre de 2010

Como colocar glow a tus campos de texto con css3

Como lo prometido es deuda, aquí les tengo el css para hacer el glow effect en los campos de texto.

Es bastante sencillo, está probado en firefox, safari y chrome. Básicamente la magia la hace la propiedad box-shadow, que permite colocarle sombra a cualquier elemento html.

 

Código CSS


form input[type="text"]{
margin-right:10px;
border:1px solid #5ABAE7;
color:#767E76;
font-family:verdana;
font-size:12px;
padding:10px;
width:230px;
-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
}
form input[type="text"]:focus{
-moz-box-shadow:0 0 15px rgba(24, 223, 227, 0.5);
-webkit-box-shadow:0 0 15px rgba(24, 223, 227, 0.5);
}

No hay comentarios:

Publicar un comentario