Mira ma, estoy buscando! Animaciones en los inputs search 9.4.14
Una forma de personalizar los input tipo search y hacerle notorio y diferente al usuario el :hover y el :focus
Mira ma, estoy buscando! Animaciones en los inputs search
Entre esos detalles que marcan la diferencia y la singularidad de una página están los elementos con los que el usuario puede interactuar y los efectos visuales y comportamientos asociados a ellos.
En otras ocasiones he traído al blog algunos ejemplos, como estos efectos al :hover en los enlaces. Hoy toca un vistazo a los campos de búsqueda input type='search' (o cualquier otro) para hacerlos más notorios en sus distintos estados.
Puestos a hacerlo... mejor con estilo
Básicamente la idea consiste en indicar y diferenciar si el usuario hace un :hover sobre el input o su label y si lo activa (vía click del ratón o mediante navegación por teclado) y está listo para introducir texto en él.
Para ello cambiamos la sombra de ambos (campo y su etiqueta) o mostramos los pseudoelementos de la etiqueta con una animación diferente para el :hover y para el :focus.
Eso sí, como no soy muy partidario de los elementos que se mueven excepto si el usuario los dispara por alguna acción y sólo mientras persiste la acción, verás que todo está quietecito por defecto.
Pero mejor experimenta con la demo:
See the Pen Correveidile by Kseso (@Kseso) on CodePen.
Ver demo a full _ Descargar códigos
Todo lo anterior radica en el uso de los selectores Css (y sus combinadores) apropiados. Porque lo que son los efectos, ya sabes lo que decía Marx, Groucho Marx
:
Estos son mis estilos, Señora.
Si no le gustan tengo otros.
Y esto es todo por hoy. Cualquier cosa, sugerencia, consulta o indicación, ya sabes. Abajo tienes los comentarios.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarEs curioso el efecto, muy ingenioso, pero personalmente me pone un tanto nervioso el que esté en movimiento constantemente.
ResponderEliminarHola Dryken
EliminarComo en todas las demos, se trata únicamente de mostrar una posibilidad y que a partir de ella cada cual la explore y realice sus creaciones.
Pero sí. no es buena tanta hiperactividad ;-)
Un saludo