¿Cuál es la mejor manera de lograr un efecto brillante cuando se enfoca en un campo de texto en HTML? ¿Se puede hacer solo con CSS o involucra imágenes? Consulte las páginas de inicio de sesión de Twitter y Tumblr para ver ejemplos de trabajo.¿Efecto "brillante" del campo de texto como las páginas de inicio de sesión de Twitter y Tumblr?
sólo tiene que utilizar el :focus pseudo-clase, y borderbox-shadow:
.text:focus {
border: 1px solid #07c;
box-shadow: 0 0 10px #07c;
}
Se ve increíble, thx – raffian
que lo enfoque mediante el uso de una sombra cuadro de CSS y luego establecer el color a azul en lugar de gris/negro.
¿Puedes dar un ejemplo? ¡No soy un experto en CSS! – raffian
Algunas otras personas han publicado ejemplos. Pero, si no eres un experto, puedes jugar con este sitio web. Es ideal para crear pequeños bits css, como una sombra de caja. http://css3generator.com/ –
hey, ese es un gran sitio para probar CSS, gracias – raffian
CSS:
#form1:focus { border: 2px solid blue; }
HTML:
<input id="form1" type="text"/>
Otras maneras que he encontrado:
utilice el focus
Si está utilizando multi-navegador se acerca:
.active-field, .selector-for-field:focus {
-webkit-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-khtml-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-moz-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
-o-box-shadow: 0 0 3px rgb(34%, 71%, 94%);
box-shadow: 0 0 3px rgb(34%, 71%, 94%);
border:1px solid rgb(34%, 71%, 94%);
}
A continuación, agregue esta clase para el campo resaltado en tecleo o el enfoque, etc., según sea necesario.
También puede obtener los específicos de IE allí si es necesario.
Las versiones prefijadas de 'box-shadow' están desactualizadas; no deberías usarlos – Ryan
No estoy de acuerdo: sigo viendo versiones anteriores de navegadores utilizando nuestros sitios, por lo que todavía están en juego. Te sugiero que compares la necesidad con tus propios visitantes en lugar de seguir los consejos anteriores sin consultarlos. – MyStream
Cualquiera de las imágenes, o caja de CSS Sombra http://css-tricks.com/snippets/css/css-box-shadow/
Sólo inspeccione el elemento, el CSS es todo lo que hay. en ': focus' apply' border: 1px solid # 56B4EF; 'y' box-shadow: recuadro 0 1px 3px rgba (0,0,0, .05), 0 0 8px rgba (82,168,236, .6); ' –
posible duplicado de [CSS - campos de inicio de sesión de Focus al igual que Twitter con solo CSS?] (http://stackoverflow.com/questions/6282678/css-focus-login-fields-just-like-twitter-with-only-css) – user123444555621
@ Pumbaa80, no es un duplicado, esa pregunta es con respecto a los aspectos funcionales de los campos de texto de inicio de sesión de Twitter, no su apariencia – raffian