Share
En este tutorial, me gustaría explorar cómo puede adornar un formulario de búsqueda simple. No haremos ninguna locura, en lugar de eso, exploraremos cuatro tomas diferentes sobre cómo puedes mejorar una entrada de búsqueda con la ayuda de las transiciones CSS..
Si desea una solución lista para usar, puede encontrar algunas excelentes transiciones de CSS en Envato Market que le permiten crear una variedad de efectos de manera rápida y sencilla. O puedes contratar un desarrollador en Envato Studio.
En su archivo HTML necesitará crear una entrada de búsqueda para comenzar. Si echa un vistazo al código a continuación, notará cuatro cosas diferentes: a .caja div, a .contenedor-1 div, un .icono, y la entrada de búsqueda en sí.
Los cuatro ejemplos tendrán un cuadro de búsqueda, naturalmente, así como un ícono de clase en busca. Cada uno de los cuatro ejemplos se alojará en un contenedor para que podamos manipular la entrada de búsqueda de forma independiente. Por último, la caja div es responsable de mantener el contenedor centrado..
Font Awesome es una librería de iconos. Puede obtener más información sobre el proyecto en el sitio web de Font Awesome..
El fragmento de código anterior es un ejemplo de cómo puede incluir el icono en su marca. Sin embargo, para que aparezca el ícono, también debe incluir un enlace a la biblioteca de Font Awesome, que se muestra en el fragmento a continuación. Incluye este enlace dentro del encabezado de tu documento..
Ahora vamos a agregar algunos estilos en una hoja de estilo separada (a la que también deberá vincular desde dentro del encabezado del documento).
cuerpo fondo: # 343d46; .box margen: 100px auto; ancho: 300px; altura: 50px;
En el fragmento de código CSS anterior, estamos agregando algunos estilos básicos a la página. El estilo de los cuadros de búsqueda será de color azul marino, por lo que el fondo del cuerpo no debe ser completamente blanco. La clase de cuadro también se está centrando en la página por el bien del tutorial.
Este tutorial tiene que ver con aprender a embellecer los cuadros de búsqueda. En este primer ejemplo explicaré con mayor detalle lo que sucede; Quiero asegurarme de que sabes exactamente lo que está pasando. En los tres ejemplos restantes, simplemente le mostraré cómo lograr las diversas transiciones.
El primer ejemplo que vamos a abordar es cambiar el fondo de la entrada de búsqueda en el hover. También agregaremos una transición para que el cambio no sea discordante..
Ya has visto el HTML para el marcado básico. Este fragmento será similar para todos los ejemplos..
Para iniciar el estilo, necesitamos definir el estilo CSS del cuadro de búsqueda. Agreguemos todas las reglas de CSS una por una para que sepa exactamente lo que está sucediendo..
.container-1 ancho: 300px; alineación vertical: medio; espacio en blanco: nowrap; posición: relativa;
Primero, queremos diseñar la clase de contenedor. La propiedad más importante es posiblemente posición: relativo. Esto se establece específicamente para que el icono se pueda colocar en la parte superior de la entrada, como verá en breve..
.container-1 input # search width: 300px; altura: 50px; fondo: # 2b303b; frontera: ninguna; tamaño de letra: 10 puntos; flotador izquierdo; color: # 63717f; relleno-izquierda: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px;
A continuación queremos diseñar la entrada real. Todo lo anterior es puramente estético, ya que el radio del borde o el color de fondo no afectan la forma en que funciona la entrada. Tome nota de la propiedad de relleno izquierdo. Está allí para hacer espacio para el icono para que no esté literalmente encima del texto dentro de la entrada.
A continuación, tenemos cuatro reglas diferentes que colorean el texto del marcador de posición, que en nuestro ejemplo es Buscar. Desafortunadamente, las reglas deben estar separadas para los prefijos de proveedores individuales y no se pueden consolidar en una regla escrita abreviada. Es un poco molesto y lo verás repetido en cada ejemplo.!
.container-1 input # search :: - webkit-input-placeholder color: # 65737e; .container-1 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-1 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-1 input # search: -ms-input-placeholder color: # 65737e;
Por último, vamos a estilizar el icono. Lo más importante es que estamos configurando su posición para colocarla encima de la entrada al configurar su posición: absoluta. Los márgenes ayudan a colocar el icono además de establecer su posición superior en 50%.
.container-1 .icon posición: absoluta; superior: 50%; margen izquierdo: 17px; margen superior: 17px; índice z: 1; color: # 4f5b66;
El siguiente conjunto de reglas que tenemos que crear es lo que sucede con el cuadro de búsqueda al pasar el mouse. En este ejemplo solo queremos cambiar el color de fondo. Para deshacerse del brillo amarillo o azul alrededor de la entrada (que a veces agregan los navegadores) establecido esquema: ninguno.
.container-1 input # search: hover, .container-1 input # search: focus, .container-1 input # search: active outline: none; fondo: #ffffff;
Como se ve en el fragmento anterior, hemos agregado dos estados adicionales - atención y activo. De esta manera, el efecto no desaparece cuando dejas de moverte en la entrada. Más importante aún, el efecto también es prominente cuando la entrada está en uso.
Para realizar la transición, necesitamos agregar algunas líneas de código. Regrese completamente a la regla donde definimos el estilo de la entrada - .contenedor # 1 entrada # búsqueda. Antes de los corchetes de cierre agregue el siguiente fragmento de código:
-webkit-transición: fondo .55s facilidad; -moz-transición: fondo .55s facilidad; -ms-transición: fondo .55s facilidad; -o-transición: fondo .55s facilidad; transición: fondo .55s facilidad;
Estamos definiendo la taquigrafía de la propiedad de transición, pero podríamos definir esos tres parámetros individualmente. En primer lugar, estamos diciendo que la transición solo debería afectar la propiedad de fondo. A continuación, estamos diciendo que la transición debería tomar un poco más de medio segundo. Por último, definimos el efecto de transición que se está aliviando. los facilitar No es el único efecto que funcionaría aquí, también podríamos haber usado lineal o facilidad en, por ejemplo. Simplemente habría parecido un poco diferente. Pruébalo tú mismo para ver si te gustan más..
El estilo de entrada ahora debería verse como el código de abajo.
.container-1 input # search width: 300px; altura: 50px; fondo: # 2b303b; frontera: ninguna; tamaño de letra: 10 puntos; flotador izquierdo; color: # 262626; relleno-izquierda: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; -webkit-transición: fondo .55s facilidad; -moz-transición: fondo .55s facilidad; -ms-transición: fondo .55s facilidad; -o-transición: fondo .55s facilidad; transición: fondo .55s facilidad;
Si no sabe nada acerca de las transiciones de CSS, permítame darle una breve descripción. En primer lugar, para que la transición funcione, la propiedad debe definirse en el estado predeterminado y no en modo activo, activo o concentrado..
Las transiciones CSS permiten cambiar gradualmente el efecto y puede definir parámetros específicos para controlar, como la propiedad que se verá afectada, la duración de la transición y el tipo de transición. Puede tener varias transiciones configuradas para un elemento. Pero, lo que es más importante, siempre debe incluir prefijos de proveedores para acomodar los distintos navegadores, ya que el soporte para esta propiedad aún no es universal..
Para obtener más información, eche un vistazo a: CSS3 Transitions And Transforms From Scratch
En este ejemplo, la búsqueda comenzará como el ícono del espejo. Cuando se desplaza sobre el ícono, la búsqueda se expandirá en el punto en el que puede escribir su consulta. La mayoría del código en este ejemplo será muy similar al ejemplo anterior..
.container-2 ancho: 300px; alineación vertical: medio; espacio en blanco: nowrap; posición: relativa;
El estilo de entrada para esta transición es diferente. La entrada es significativamente más pequeña, por lo que el ícono puede aparecer detrás de un cuadrado. Todas las propiedades restantes, como el fondo o el color de la fuente, son las mismas que no queremos cambiar completamente el estilo de la búsqueda.
.container-2 input # search width: 50px; altura: 50px; fondo: # 2b303b; frontera: ninguna; tamaño de letra: 10 puntos; flotador izquierdo; color: # 262626; relleno-izquierda: 35px; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; color: #fff; -webkit-transición: ancho .55s facilidad; -moz-transición: ancho .55s facilidad; -ms-transición: ancho .55s facilidad; -o-transición: ancho .55s facilidad; transición: ancho .55s facilidad;
Como también puede ver, he redefinido la propiedad de transición para afectar solo el ancho. He mantenido el mismo tiempo porque es lo suficientemente rápido como para no molestar a los usuarios, pero lo suficientemente largo como para crear un efecto agradable.
A continuación se muestra el código para recolorear el texto del marcador de posición.
.container-2 input # search :: - webkit-input-placeholder color: # 65737e; .container-2 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-2 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-2 input # search: -ms-input-placeholder color: # 65737e;
Y una vez más tenemos el icono de estilo CSS. Debe ser el mismo que en el ejemplo anterior..
.container-2 .icon posición: absoluta; superior: 50%; margen izquierdo: 17px; margen superior: 17px; índice z: 1; color: # 4f5b66;
Lo último que tenemos que hacer es definir cómo se verá la búsqueda cuando esté sobre ella. En el fragmento debajo de la primera regla, asegúrese de que el formulario no tenga el brillo inducido por el navegador y de que cuando esté utilizando la entrada, al escribirla, el cuadro de búsqueda permanece expandido. La regla del medio simplemente expande la entrada a todo el ancho en el hover.
.container-2 input # search: focus, .container-2 input # search: active outline: none; ancho: 300px; .container-2: hover input # search width: 300px; .container-2: hover .icon color: # 93a2ad;
Lo último que sucede en el código anterior es que al desplazarse el ícono cambia de color. Es solo un pequeño detalle para mostrar rápidamente a un usuario que el cuadro de búsqueda está activo y funcionando, en lugar de una entrada inactiva. El cambio no se implementa por una transición..
De los cuatro ejemplos, este es el más sutil, tanto en términos de código como de efecto visual. En este caso, el icono del espejo se abrirá ligeramente y aumentará de tamaño..
Una vez más, el marcado HTML del icono y el cuadro de búsqueda es el mismo que en los dos ejemplos anteriores. La excepción, por supuesto, es la .contenedor-3.
El CSS para este ejemplo no es nada especial. En su mayor parte, comienza muy similar a los primeros ejemplos donde el estado predeterminado no es diferente en absoluto. A continuación se muestra el código para el contenedor y la entrada. Tenga en cuenta que no hay transición en la entrada esta vez.
.container-3 ancho: 300px; alineación vertical: medio; espacio en blanco: nowrap; posición: relativa; .container-3 input # search width: 300px; altura: 50px; fondo: # 2b303b; frontera: ninguna; tamaño de letra: 10 puntos; flotador izquierdo; color: # 262626; relleno-izquierda: 45px; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px; color: #fff;
Una vez más tenemos las reglas de marcador de posición..
.container-3 input # search :: - webkit-input-placeholder color: # 65737e; .container-3 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-3 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-3 input # search: -ms-input-placeholder color: # 65737e;
Ahora, por su aspecto, el ícono de este ejemplo también es el mismo. Es el mismo color, la misma posición y así sucesivamente. Sin embargo, le he añadido una transición. Estas transiciones se dirigen a todas las propiedades, lo cual es un enfoque más corto en lugar de explicarlas individualmente.
.container-3 .icon posición: absoluta; superior: 50%; margen izquierdo: 17px; margen superior: 17px; índice z: 1; color: # 4f5b66; -webkit-transición: toda la facilidad de .55s; -moz-transición: toda la facilidad de .55s; -ms-transición: toda la facilidad de .55s; -o-transición: toda la facilidad de .55s; transición: todo .55s facilidad;
.container-3 input # search: focus, .container-3 input # search: active outline: none; .container-3: hover .icon margin-top: 16px; color: # 93a2ad; -webkit-transform: escala (1.5); / * Safari y Chrome * / -moz-transform: scale (1.5); / * Firefox * / -ms-transform: scale (1.5); / * IE 9 * / -o-transform: scale (1.5); / * Opera * / transform: scale (1.5);
Hay un par de cosas que suceden en el código anterior. En primer lugar, estamos cambiando el color del ícono al mover el mouse y lo estamos moviendo un poco más alto para que quede centrado verticalmente cuando sea más grande. En segundo lugar, estamos agregando una transformación al elemento de icono al pasar el cursor para que de hecho sea 1.5 veces su tamaño original. Debido a que la transición previamente definida se estableció para impactar todos propiedades, aparece como si el icono aumentara de tamaño al desplazarse.
De nuevo, eche un vistazo a Transiciones CSS3 y transformaciones desde cero para obtener más información sobre la propiedad de transformación.
A diferencia de los últimos tres ejemplos, este será más complejo. Al pasar el mouse, un botón se deslizará en la parte superior de la entrada para permitirle continuar, algo así como Enviar o Ir. El botón tendrá el icono de espejo dentro de él..
Aquí el HTML es un poco diferente. La entrada sigue ahí, por supuesto, pero el icono ahora está dentro de un elemento de botón que viene después de la entrada. Es importante que el botón esté después de la entrada, ya que se relaciona con la forma en que se creará el efecto de desplazamiento en CSS.
El CSS en este ejemplo es diferente, así que presta atención. A continuación se muestra el fragmento para estilizar el contenedor. primero, posición: relativo Está perdido; ya no es importante ya que el ícono no depende de que se coloque encima de la entrada. Sin embargo, tenemos desbordamiento: oculto. Esto evita que el botón se muestre cuando no está activado. Técnicamente el botón que aparece está presente a la derecha de la entrada, pero gracias a desbordamiento: oculto no se muestra cuando cae más allá del ancho del contenedor: el contenedor y la entrada tienen el mismo ancho.
.container-4 desbordamiento: oculto; ancho: 300px; alineación vertical: medio; espacio en blanco: nowrap;
Debajo de la entrada no tiene la transición porque no es el elemento afectado esta vez.
.container-4 input # search width: 300px; altura: 50px; fondo: # 2b303b; frontera: ninguna; tamaño de letra: 10 puntos; flotador izquierdo; color: #fff; relleno-izquierda: 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; radio del borde: 5px;
El fragmento para recolorear los marcadores de posición es el siguiente.
.container-4 input # search :: - webkit-input-placeholder color: # 65737e; .container-4 input # search: -moz-placeholder / * Firefox 18- * / color: # 65737e; .container-4 input # search :: - moz-placeholder / * Firefox 19+ * / color: # 65737e; .container-4 input # search: -ms-input-placeholder color: # 65737e;
A continuación se muestra el código para diseñar el botón que aparece al desplazarse. El truco para hacer que se deslice desde el costado es colocarlo justo detrás de la entrada y hacerlo invisible a menos que se encuentre en el hover. El botón es el elemento que cambia, se mueve, por lo tanto, es aquel en el que se define la transición. Para simplificar las cosas, he identificado la transición para impactar todas las propiedades.
.container-4 button.icon -webkit-border-top-right-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; borde superior-derecho-radio: 5px; borde inferior-derecho-radio: 5px; frontera: ninguna; fondo: # 232833; altura: 50px; ancho: 50px; color: # 4f5b66; opacidad: 0; tamaño de letra: 10 puntos; -webkit-transición: toda la facilidad de .55s; -moz-transición: toda la facilidad de .55s; -ms-transición: toda la facilidad de .55s; -o-transición: toda la facilidad de .55s; transición: todo .55s facilidad;
Para desvanecerse en el botón, es necesario moverlo sobre la entrada. Eso se hace a través del margen negativo. Anteriormente configuramos la opacidad del botón para 0 así que tenemos que restablecerlo a 1 Para que el botón sea visible también..
La última regla solo cambia el fondo del botón si se desplaza sobre el botón. Es bueno que un usuario sepa que el botón está activo y puede hacer clic en él para enviar la búsqueda; No tiene sentido tener un botón si aparece inactivo.
.container-4: hover button.icon, .container-4: active button.icon, .container-4: focus button.icon outline: none; opacidad: 1; margen izquierdo: -50px; .container-4: hover button.icon: hover background: white;
Bueno, ¡eso nos lleva al final de nuestros experimentos de CSS! Tomamos un formulario de búsqueda básico y utilizamos una pequeña selección de efectos para cambiar su comportamiento. ¿De qué otra forma sugerirías cambiar una entrada de búsqueda como esta? ¿A qué otros aspectos del mismo aplicarías las transiciones o transformaciones de CSS? Háganos saber en los comentarios.!
Hemos creado una guía completa para ayudarlo a aprender CSS, ya sea que esté comenzando con lo básico o si desea explorar CSS más avanzados..
Accentsconagua