El siguiente ejemplo muestra cómo crear crear un resplandor que aparece al tener el foco un elemento input. La aparición de este resplandor o "glow" se realiza mediante transiciones CSS y el método box-shadow.
Ahora con tan solo esos pequeños códigos generamos algo como lo siguiente:
Nombre:
CSS
[input{ font-size:18px; font-family: Arial, helvetica; outline:none; transition: all 0.75s ease-in-out; -webkit-transition: all 0.75s ease-in-out; -moz-transition: all 0.75s ease-in-out; border-radius:3px; -webkit-border-radius:3px; -moz-border-radius:3px; border:1px solid rgba(0,0,0, 0.2); color:gray; background-color:#eee; padding: 3px; } input:focus { box-shadow: 0 0 10px #aaa; -webkit-box-shadow: 0 0 10px #aaa; -moz-box-shadow: 0 0 10px #aaa; border:1px solid #999; background-color:white; }]
HTML
[Nombre: <input type="text" name="usuario" value="" />]
Ahora con tan solo esos pequeños códigos generamos algo como lo siguiente:
Nombre:
