Los diseñadores pueden haber notado un uso cada vez mayor de las propiedades de transición de CSS3. Las interfaces de sitios web se han mejorado dramáticamente con estilos de animación personalizados, todo sin la necesidad de JavaScript (cuando se usa con sensatez, ¡por supuesto!)
En este tutorial quiero demostrar cómo podemos crear efectos de animación en campos de entrada HTML5. Estaré diseñando un formulario de contacto simple con un par de campos y un área de texto. Usando el CSS3 :válido pseudo clase es más fácil que nunca personalizar entradas de texto. Vea mi ejemplo de demostración en vivo para tener una idea de cómo se ve el producto final.
Demo en vivo - Descargar código fuente
Comenzando el documento
Necesitamos comenzar con un archivo index.html en blanco usando el doctype estándar de HTML5. Incluiré algunas fuentes web alternativas para arreglar el diseño. Pero no es nada que afectará dramáticamente la calidad del tutorial.
La sección más interesante de la página se relaciona con la configuración de un formulario HTML5 genérico. El botón de enviar no hace nada más que recargar la página. Sin embargo, no sugiere que no pueda vincularse a un script de PHP o Ruby back-end para el procesamiento de datos, o incluso a través de Ajax. Las transiciones de CSS3 solo deberían afectar los estilos frontend y nada más.
Cada entrada está contenida dentro de un div con la clase .fila Mantener los elementos separados. De esta manera es mucho más fácil tener la etiqueta al lado del campo de entrada. Y de manera similar, incluir otros avisos o advertencias en el lado derecho de los campos. Cada entrada recibe la clase. .TXT mientras que el elemento textarea está estilizado usando .txtarea.
Estructura de diseño CSS
Quiero saltar a nuestro código CSS y comenzar explicando los restablecimientos de CSS. Utilizo una plantilla de bloque similar para restablecer los navegadores a valores predeterminados similares de tamaño de fuente, altura de línea y tamaño de caja. Además, estoy configurando las diversas fuentes web y estructurando elementos básicos con el espacio adecuado. Siéntase libre de guardar esta plantilla para usarla en otros proyectos web.
Pasando a la sección del cuerpo del núcleo, tenemos un div envoltorio usando la ID #w. Esto se centra en la página con un ancho limitado de 660px. Los elementos de la fila interna tienen el estilo de contenedores de bloques, con etiquetas internas y campos de entrada de formulario.
La clase pequeña .req es para los caracteres de asterisco requeridos utilizados en todas las etiquetas. Pero aún más interesante es la última sección del código para anular el texto del marcador de posición interno. No todos los navegadores CSS3 son totalmente compatibles con estas propiedades, pero funcionan en los motores Webkit y Mozilla actualizados.
Notará que los marcadores de posición de texto de formulario interno ahora están en cursiva y adquieren un tono de color de texto de gris oscuro / azul. Encuentro que este CSS adicional ayuda a distinguir de las letras reales escritas por el usuario frente al texto de muestra del marcador de posición.
Estilismo con transiciones
Quiero saltar a la sección final discutiendo cómo podemos usar las pseudo clases para realizar animaciones. Los estilos más importantes comienzan con el .TXT y .txtarea Clases utilizadas en cada elemento de formulario.
He hecho un montón de personalización con las nuevas propiedades CSS3. Pero también tenga en cuenta cómo he dividido las configuraciones de fondo individuales por sus propiedades únicas, como color de fondo y imagen de fondo. Esto es necesario cuando necesitamos animar la marca de verificación en la entrada sin deslizarnos completamente desde la izquierda. En su lugar, lo mantenemos escondido justo a la derecha donde está oculto a la vista, y luego lo animamos desde el lado derecho.
También notarás que los códigos para :atención y :válido son muy diferentes. Esta es otra razón por la que dividir las propiedades es una buena idea, porque podríamos animar algo en una pseudo clase pero no en la otra. Cada propiedad de transición apunta a todos los cambios, por lo que esto significa que debe tener cuidado con las propiedades que se están actualizando.
Tenga en cuenta que el usuario podría ingresar un nombre válido solo para eliminarlo unos segundos más tarde. Nuestro selector válido tendrá que volver a animar de nuevo a las propiedades básicas, pero manteniendo el :atención propiedades que se muestran también. La animación segmentada es la clave para que estos estilos funcionen. Requerirá un poco de prueba y error, pero estos efectos también podrían duplicarse en cada navegador heredado con JavaScript adicional.
Otro aspecto de la forma animada es el botón enviar. Obviamente, los efectos adicionales son insignificantes en comparación con los campos de entrada. Pero creo que vale la pena examinar todas las propiedades ya que están relacionadas entre sí.
En lugar de configurar varias propiedades de fondo, acabo de usar gradientes CSS3 y sus prefijos específicos del proveedor. Esto mantiene el fondo estable al mismo tiempo que mejora las sombras de la caja a través de los estados activo y activo.
Demo en vivo - Descargar código fuente
Pensamientos finales
El proceso de construcción de animaciones CSS3 formales lleva trabajo. Hay bibliotecas externas como Animate.css que pueden ayudar, pero aún así no brindan tanto soporte como JavaScript. Afortunadamente, los estándares CSS3 son lo suficientemente avanzados como para proporcionar animaciones básicas: desplazamiento, enfoque y pseudo clases similares.
Espero que este tutorial pueda ofrecer una base de código de ejemplo para desarrolladores web. Puedes aprender mucho practicando técnicas durante un par de horas. Siéntase libre de descargar una copia de mis códigos de muestra y jugar con diferentes configuraciones. No es tan difícil como podría esperar implementar transiciones similares en su propio sitio web.