Hemos hecho un montón de cosas divertidas recientemente con el :flotar selector. Desde los efectos de desplazamiento del botón para principiantes hasta tutoriales de desplazamiento más avanzados e incluso el uso de desplazamientos con múltiples fondos. Hoy estamos avanzando y aprendiendo sobre un selector relacionado pero igualmente asombroso que a menudo se pasa por alto.
Con :activo, podemos controlar el estado de un objeto mientras se hace clic. Normalmente, esto toma la forma simple de cambiar el color de un enlace mientras se presiona el mouse, pero vamos a hacer algo mucho más interesante. Sigue mientras construimos un súper juego de trivia presidencial de CSS puro y genial.
Lo que estamos construyendo
La idea básica aquí es bastante simple. Tenemos una cuadrícula de ocho imágenes con el objetivo de identificar a los hombres representados, cada uno de los cuales es un ex presidente de los Estados Unidos. Al pasar el cursor sobre una imagen, se desliza un poco hacia abajo para revelar más instrucciones, lo que lo alienta a hacer clic. Al hacer clic y mantener presionado, la imagen se deslizará hacia abajo para revelar el nombre del presidente que se muestra.
Manifestación: Haz click aquí para lanzar la versión en vivo.
Descargar: Haga clic aquí para descargar los archivos de origen
Selectores de pseudo-clase
Un selector de pseudo-clase es algo que podemos usar en CSS para modificar un selector básico. Si esto suena demasiado técnico para su gusto, no se preocupe, ¡ya los usa sin saberlo! Con la que probablemente estés más familiarizado es con el :flotar Selector de pseudo-clase, que le permite cambiar la apariencia de algo al pasar el mouse. También puede estar familiarizado con selectores de pseudo-clases más sofisticados, como :primer hijo.
Con respecto a los enlaces o anclajes, hay cuatro de estos selectores de pseudo-clases con los que debe estar familiarizado. Aquí están con explicaciones para su uso:
Como puede ver, nuestro selector de desplazamiento de uso frecuente es parte de una pequeña familia que puede gobernar el estilo de un enlace en casi todos los estados de su existencia. Es importante tener en cuenta que este sería un conjunto de herramientas mucho más interesante si :visitó No fueron tan problemáticos. Debido a problemas de seguridad, los navegadores realmente limitan lo que puedes hacer con esta pseudo-clase. Por ejemplo, puedes usarlo para cambiar el color de un enlace, pero no puedes manipular la imagen de fondo de ese enlace.
Por esta razón, nos dirigimos a :activo Si queremos hacer algo realmente divertido con un evento de clic de CSS puro. Sin embargo, no es intuitivo hacer clic y mantener, por lo que debe seguir con cuidado al usar esta funcionalidad y siempre asegúrese de informar claramente al usuario.
¡Basta de cosas aburridas, comencemos con nuestro proyecto!
El HTML
El HTML para nuestro proyecto es bastante simple. Comenzamos con una breve introducción que indica qué es el juego y cómo jugarlo. Aquí hacemos una pregunta simple: "¿Quiénes fueron los primeros ocho presidentes de los Estados Unidos?" Tenga en cuenta que todo esto se lanza en un simple contenedor div.
A continuación, creamos un módulo reutilizable para mantener nuestra imagen, que sirve como una especie de pregunta visual, y la respuesta, un párrafo simple que se oculta debajo de la imagen. El concepto de ser reutilizable es clave aquí. Queremos repetir esto para otros siete presidentes y, obviamente, no queremos pasar el dolor de diseñar cada módulo individualmente. Por esta razón, aplicamos una clase (presidente), que podemos diseñar una vez y hacer que esos estilos afecten todo a lo que se aplica la clase.
Control del progreso
Ahora debería tener unos márgenes agradables que alejen el contenido del borde y un título bonito que ya no use el estilo tipográfico predeterminado.
Estilo de la clase del presidente
Ahora vamos a comenzar a agregar un poco de estilo a la clase de presidente, lo que debería hacer una gran diferencia en nuestro diseño. Para empezar, queremos hacerlos flotar todos hacia la izquierda y establecer sus dimensiones. Ya que vamos a deslizar las imágenes hacia adentro y hacia afuera, configuramos el desbordamiento en oculto para que nada salga de nuestro pequeño cuadro de 200px por 200px.
A continuación, establecemos el margen en 20px, esto no es un número arbitrario. Es el valor cuidadosamente calculado que permite cuatro imágenes por fila en nuestro diseño. Nuestro ancho es de 960px, que se divide entre cuatro imágenes de 200px de ancho, pero 4 * 200 es igual a 800, quedando 160 píxeles para los márgenes. Las imágenes de 160 píxeles / 4 son 40 píxeles de margen por imagen, 20 a la izquierda y 20 a la derecha.
Hay algunos otros puntos de interés aquí también. Más adelante añadiremos algunos vudú de índice z, lo que hace que cualquier color de fondo cubra nuestro texto de respuesta. Para dar cuenta de esto, usé un relleno de fondo RGBa al 20%. A las versiones anteriores de IE no les gusta esto, por lo que simplemente no obtienen un relleno de fondo.
También puse el cursor en? Puntero? lo que hará que aparezca la manecilla cuando estemos sobre un presidente. Finalmente, agregué una sombra para insertar nuestro fondo para que se vea un poco más agradable. Esta parte es completamente opcional.
Control del progreso
En este punto, las cosas se ven un poco raras, pero estamos en el camino correcto. Las imágenes de nuestro presidente están siendo contenidas y recortadas, lo cual es bueno, pero el texto de fondo en realidad las está presionando, lo que no queremos. En su lugar, queremos que la imagen flote sobre el texto. Lo lograremos en el siguiente paso.
Arreglar los estilos de texto y el orden de apilamiento
Antes de proceder a hacer todo este trabajo, estilicemos nuestro texto de párrafo muy rápido. Si esperamos más, se ocultará detrás de las imágenes y será más difícil vigilarlo.
Estos estilos deberían hacer que todo nuestro texto se vea mucho mejor. Tenga en cuenta que aunque la etiqueta pequeña tiene un estilo predeterminado, puede y debe ser fácilmente anulada de forma manual.
Poniendo el texto detrás de las imágenes
Como mencioné anteriormente, no queremos que nuestros párrafos presionen la imagen, sino que se escondan detrás de ella. Para lograr esto, lo liberamos del flujo con posicionamiento absoluto y luego lo movemos detrás de la imagen con un índice z de -1.
Esto pone todo justo donde lo queremos. El texto se esconde detrás de la imagen y cada imagen se muestra finalmente en su forma completa. ¿El problema? ¡No hay manera de ver la respuesta!
Traerlo a la vida
Ahora que tenemos todo justo donde lo queremos, es hora de agregar la interacción. Pensemos en cómo queremos que funcione: ya tenemos el estado predeterminado codificado, así que estamos bien allí. El siguiente paso es el evento hover. Esto debería derribar la imagen, pero solo un poco, lo suficiente para mostrar la primera línea de texto. Luego, al hacer clic, queremos bajar la imagen aún más.
Todo esto debe suceder con algunas transiciones agradables, por supuesto, por lo que resulta que nuestro primer paso es configurarlas en las imágenes. Como siempre, necesitamos un millón de versiones diferentes para tener en cuenta todos los distintos navegadores:
Con estas transiciones en su lugar, cada vez que cambiemos los márgenes de nuestras imágenes, la transición se animará. Así que nuestro siguiente paso es definir el evento de desplazamiento con nuestro selector de pseudo-clase favorito.
Esto agrega un poco de margen a la parte superior de nuestra imagen, de modo que cuando el usuario se desplaza sobre ella, esto es lo que verán:
Esto sirve como un pequeño consejo para saber cómo obtener la respuesta. Si mostramos la respuesta completa aquí, es probable que tengamos un problema con revelaciones accidentales, el clic sirve como una forma más concreta de garantizar la intencionalidad.
Nuestra pieza final de CSS es lo que hemos venido a aprender aquí: el selector activo de pseudo-clases. Al implementar esta pieza final pequeña pero poderosa, todo nuestro juego de preguntas se une.
Ahora, cuando un usuario hace clic en una imagen y mantiene presionado el botón, la imagen del presidente se desliza hacia abajo y se revela su nombre. Con eso, todos hemos terminado!
Conclusión
Después de leer este tutorial, deberías saber un montón de cosas geniales sobre algunos de los selectores de pseudo clases más populares y cómo usarlos para obtener resultados realmente interesantes. Combinamos los selectores activo y activo para crear un juego de trivia de CSS puro en el que el usuario primero se desplaza y luego hace clic para ver un mensaje oculto.
Deja un comentario a continuación y déjanos saber si aprendiste algo. También asegúrese de revisar la demostración en vivo. ¿Puedes nombrar a los ocho presidentes con éxito?