Este tutorial es otro proyecto CSS divertido que te ayuda a construir algo que quizás hayas pensado que solo era posible con JavaScript. Vamos a crear una ventana modal que se puede mostrar y ocultar con un clic que funciona con una casilla de verificación de CSS.
Para mejorar el trato, también usaremos una consulta de medios para asegurarnos de que la pantalla modal se adapte bien a tamaños de pantalla más pequeños. ¡Entremos y veamos cómo funciona todo!
Demo en vivo: Haga clic aquí para lanzar.
Empezando
Para empezar, necesitaremos un contenido genérico que siempre esté visible en la página. No necesitamos nada sofisticado, solo un poco de texto por ahora. Utilicé un encabezado básico y un párrafo:
Hasta ahora todo bien, ahora pasemos al botón que activa y desactiva nuestra ventana modal.
Toggle HTML
En este artículo, los comentaristas votaron para ver más tutoriales sobre cómo anular las casillas de verificación para crear eventos de clic puro en CSS, ¡así que eso es exactamente lo que vamos a hacer aquí!
Cómo funciona esto es bastante simple. Comenzamos con una entrada con un tipo de casilla de verificación? con una etiqueta de texto básica adjunta así:
Como puedes ver, la etiqueta para? La sección coincide con el ID de la entrada. ¡Esto es importante! La buena funcionalidad aquí es que, incluso si ocultamos la casilla de verificación real, que es exactamente lo que vamos a hacer, esa etiqueta puede servir como un elemento seleccionable que alterna el estado marcado de la casilla.
HTML modal
Ahora es el momento de terminar nuestro HTML agregando el código de ventana modal real. Después de la casilla de verificación, crea un div con una clase de "modal". Dentro de esta div, puedes colocar lo que quieras. Fui con otro encabezado y configuración de párrafos simples.
Con eso, todos hemos terminado con nuestro HTML. Si abrimos nuestra página en un navegador, realmente no hay mucho que ver. Sin embargo, todos los elementos clave que necesitamos están en su lugar y listos para ser diseñados.
Cuerpo y Contenedor CSS
Ahora que hemos terminado nuestro HTML, saltemos a nuestro CSS y empecemos a hacer que esto se vea un poco mejor. Lo primero que voy a hacer es lanzar una imagen de fondo de madera que se repite para hacer que nuestra página sea un poco más atractiva.
Como puede ver, esta imagen es cortesía de SubtlePatterns. A continuación, vamos a estilizar nuestro contenedor. Primero, comience con un margen, relleno y tamaño, luego proceda con el texto.
Como puede ver, usamos la abreviatura de CSS para declarar el estilo de fuente para nuestro encabezado y párrafo. Esta es una forma sucinta de declarar su peso, tamaño, altura de línea y familia de fuentes. Observe que mi altura de línea se establece en 1.5 sin ningún tipo de unidad especificada. Este es un pequeño gran truco que te permite declarar tu altura de línea como una proporción al tamaño de fuente.
Casilla de verificación CSS
Ahora que hemos diseñado el contenido genérico de nuestra página, es hora de atacar la etiqueta y la casilla de verificación. El primer paso aquí es diseñar la etiqueta para que se parezca más a un botón y menos a un simple fragmento de texto.
Si cambiamos la etiqueta a un elemento de nivel de bloque, podemos declarar la altura, el ancho y el color de fondo, lo que nos ayuda a lograr el aspecto de botón que estamos buscando. También tenga en cuenta que configuro un estilo de desplazamiento para cambiar el color y el cursor para que se comporte más como un enlace.
Con nuestra etiqueta de la manera que queremos, ahora podemos deshacernos de la casilla de verificación real. Para hacer esto, simplemente cambie la posición a absoluta y extráigala del lienzo.
Con este código, nuestra página se ve bastante impresionante. Aquí hay un vistazo:
CSS modal
El contenido de la página estática está marcado y con estilo. Nuestra siguiente tarea es hacer que el último fragmento de HTML se vea como un cuadro modal. Hacemos esto con una buena parte de CSS. Echemos un vistazo y luego te guiaré a través de él.
Hay mucho que hacer aquí, así que vamos a romperlo. El primer objetivo era centrar el cuadro en la página. Esto es bastante complicado dado que estamos usando la vista completa y, por lo tanto, no conocemos las dimensiones de nuestros padres.Sin embargo, al usar posicionamiento absoluto, márgenes automáticos y valores de posicionamiento restablecidos, centramos automáticamente nuestro elemento en la pantalla.
Observe que también establezco el índice z en un valor negativo. Esto se debe a que la ventana modal, incluso cuando está oculta, puede bloquear otros elementos en la página. No lo verás, pero podría prevenir un clic o un hover, por lo que lo tiramos a la parte inferior de la pila.
El resto del código es de estilo visual. Le dimos las obras: un fondo ligeramente transparente, caja-sombra, transición y esquinas redondeadas. Note que tengo la opacidad establecida en 0 por defecto. Esto se debe a que solo queremos que aparezca la ventana modal cuando hacemos clic en el botón.
Tipo modal
Tenemos nuestra caja de estilo, pero no olvide el tipo dentro. Usaremos estilos similares pero ligeramente diferentes al otro texto en la página. Recuerda poner estilo tanto al h2 como al párrafo.
Estado comprobado
¡Hazlo funcionar!
El cuadro modal se ve bien ahora, pero nunca lo sabrías porque está oculto. Hagámoslo para que aparezca cuando se hace clic en la etiqueta / botón.
Aquí nos dirigimos a la entrada con el? Toggle? clase y un estado comprobado, luego buscó un hermano adyacente con una clase de "modal". A continuación, traemos la opacidad y el índice z de la ventana modal hasta uno para que sea completamente visible.
CSS adaptable
¡Nuestra caja modal está casi terminada! Todo funciona correctamente y estilizado muy bien. Sin embargo, noté que las cosas no se ven bien cuando se reduce el tamaño de la ventana gráfica. Un poco de estilo adaptativo aquí va un largo camino, así que pongamos esfuerzo.
Como puede ver, simplemente configuré una única consulta de medios a 767px y reduje el tamaño de algunas cosas: las dimensiones de la caja, el h2 y el párrafo. Ahora, el cuadro modal tiene dos estados diferentes que lo hacen lucir genial en pantallas pequeñas o grandes.
Velo en accion
Con eso, todos hemos terminado! Para probar la página por sí mismo, visite la demostración a continuación.
Manifestación: Haga clic aquí para lanzar.
¿Qué piensas?
Ahí lo tiene, una ventana modal de CSS pura que se adapta a tamaños de pantalla grandes y pequeños. Como siempre, hay algunas preocupaciones semánticas cuando secuestró una casilla de verificación para algo como esto, pero no sentí que este fuera un trabajo para: target, así que parecía ser el camino a seguir.
Deja un comentario abajo y déjame saber lo que piensas. ¿Qué cambiarías? ¿Cómo lo harías mejor?