CSS ofrece una variedad de marcos para que los programadores diseñen páginas web dinámicas. Es más agradable porque proporciona todas las funciones y herramientas importantes en un solo lugar. Por lo tanto, no es necesario utilizar otros marcos. El marco Tailwind en CSS es el más utilizado porque le ahorra al usuario tiempo para escribir CSS excesivo.
Esta guía proporciona el uso de desplazamiento, enfoque y otros estados en Tailwind.
¿Cómo utilizar el desplazamiento, el enfoque y otros estados en viento de cola?
Al diseñar páginas web, es necesario agregar elementos dinámicos y atractivos para mantener la interactividad con los usuarios. Las funciones de Tailwind se pueden utilizar para crear páginas interactivas y dinámicas sin escribir CSS personalizado adicional. Algunas funciones son 'desplazar el cursor', 'enfocar' y 'activar', que ayudan a agregar atractivo a los diseños.
Usando la variante Hover en HTML
La propiedad de desplazamiento se utiliza para diseñar un elemento HTML cuando el usuario mueve el cursor del mouse sobre un elemento específico. Ayuda a presentar una experiencia fluida.
Paso 1: aplique la propiedad 'hover' en HTML
Cree un archivo HTML y aplique la propiedad de desplazamiento a algún elemento del código. Para tener una idea, eche un vistazo al código que figura a continuación:
< cuerpo >
< div clase = 'centro' >
< botón clase = 'bg-green-500 hover:bg-blue-500 texto-fuente blanca-negrita redondeada' >
¡Pase el cursor sobre mí!
< / botón >
< / div >
< / cuerpo >
En este código:
- Un botón llamado “ ¡Pase el cursor sobre mí! ”se crea mediante la etiqueta del botón.
- “ bg-verde-500 ” establece el color de fondo del botón en verde.
- “ flotar: bg-blue-500 ”cambia el color del botón de verde a azul cuando se mueve el mouse sobre él.
- El texto del botón tiene color blanco “ texto-blanco ' y ' negrita ” pone la fuente en negrita.
- La forma del botón está configurada para redondearse en ' redondeado ”.
Paso 2: Vista previa de la salida
Después de ejecutar el código anterior, la vista final se ve así:
Se puede observar que el botón cambia de color cuando se pasa el cursor del mouse sobre él.
Usando la variante de enfoque en HTML
La propiedad de enfoque se utiliza para diseñar elementos HTML de modo que cuando el usuario hace clic en el elemento, se resalta para llamar la atención del usuario.
Paso 1: aplique la propiedad de enfoque en el código HTML
Cree un archivo HTML y aplique la propiedad de enfoque a algún elemento deseado. Para obtener una impresión, considere el siguiente código:
< div >
< / div >
< / cuerpo >
En este código:
- El ' doblar La clase crea una flexión.
- El ' justificar-centro ”justifica la alineación del contenido hacia el centro.
- El ' centro de artículos La clase “ajusta los objetos al centro de la pantalla.
- El ' pantalla h ” establece el tamaño de la pantalla según la ventana gráfica.
- “ bg-azul-200 ” establece el color de fondo en azul.
- Se crea un cuadro de entrada de tipo texto.
- El ' foco: bg-green-300 ”cambia el color del cuadro de entrada a verde cuando el usuario hace clic en él.
- “ w-64 ” establece el ancho en 64px.
- “ h-10 ” establece la altura en 10px.
- “ px-4 'Agrega un relleno de 4px en la parte superior e izquierda.
- “ py-2 'Agrega un relleno de 2px en la parte superior e inferior.
Paso 2: Vista previa de la propiedad de enfoque
Guarde el código HTML y abra la página web creada por él. Luego mueva el cursor en el cuadro de entrada y haga clic en él y se producirá el siguiente cambio:
Usando la variante activa en HTML
Esta propiedad se utiliza para diseñar elementos para la condición cuando el usuario toca dinámicamente el elemento. El estado activo es el período de tiempo desde la etapa de activación del cursor y su estado liberado.
Sintaxis
activo: { propiedad }La propiedad CSS específica se aplica al elemento seleccionado.
Paso 1: aplicar la variante activa en el código HTML
Cree un archivo HTML y aplique la propiedad activa a algún elemento que en el siguiente caso es un botón:
< div clase = 'flexificar justificar-centrar elementos-centro h-pantalla' >
< botón clase = 'bg-green-600 p-4 transición-md redondeada-duración de la transformación-400 transformación activa: escala-110' >
¡Haz click en mi!
< / botón >
< / div >
< / cuerpo >
En este código:
- “ bg-verde-600 ” establece el color de fondo en verde.
- “ página 4 ”agrega un relleno de 4px.
- “ md redondeado ”hace que la forma del botón sea redondeada.
- “ transición-transformación 'Se utiliza para transformar el botón durante un breve período de tiempo que se establece mediante' duración-400 transformación ”.
- El ' activo: escala-110 ” transforma el botón a un tamaño más grande.
Paso 2: Vista previa de la salida
Guarde el código anterior en un archivo HTML y obtenga una vista previa de la página web creada por él. La página web se verá así:
Se puede observar que el tamaño del botón aumenta cuando el mouse lo mantiene presionado y apenas lo suelta vuelve a su estado inicial.
Conclusión
Para usar el desplazamiento, el enfoque y otros estados en Tailwind, use las clases de estado predefinidas como 'desplazamiento' y aplíquele algunas propiedades de estilo, como cambiar el color, crear un anillo de enfoque, etc. Las utilidades de visualización se utilizan para presentar una salida escalable. Este artículo ha demostrado el método para utilizar el desplazamiento, el enfoque y otros estados en Tailwind.