Sin embargo, con CSS lo único que podemos controlar actualmente es esto último de pasar el puntero. Se hace usando el pseudoelemento :hover y ya hemos visto por aquí algunos ejemplos sencillos y otros un poco más sofisticados (1) (2).
Pero como decía, no hay nada en CSS que sirva para el clic. Nada que sea directo claro, porque indirectamente sí que tenemos al menos un sistema. Lo vemos.
La clave es usar la etiqueta HTML input del tipo checkbox que es la que se usa para botones radio en formularios y en la que sí se puede controlar mediante CSS cuando está clicada (realmente, seleccionada) gracias a la pseudoclase CSS :checked.
Para poder manejar cómodamente con CSS todo esto, la cosa comienza con incluir en el HTML un input, seguida su etiqueta label que hará las veces de botón y justo a continuación, dentro de una caja div, el elemento que será mostrado/ocultado con el clic en el anterior.
Con lo único que hay que tener cuidado es con que cada par input-label tengan la misma ID y sobre todo, que si usamos en la misma página otros spoilers de este tipo, la ID vaya siendo distinta.
Ya metidos en el CSS, para los distintos selectores usaremos un filtro para atributos con el fin de que el estilo se aplique sólo a los input cuyo id empiecen por "spoiler" [id^="spoiler"] y que no afecte a otros que pudiera tener la página para otros fines.
Pero la clave de todo está en poder detectar con :checked, cuando un input está seleccionado. Cuando eso ocurre, a sus hermanos adyacentes que encontramos con +, le aplicamos otro estilo y listo. En este caso lo mostraremos inicialmente con opacity: 0 y con el clic lo pasaremos a opaco total para hacerlo visible.
Este sería el código básico para conseguir todo esto:
Como veis, en primer lugar ocultamos el input para que el botón radio no se vea y lo siguiente, menos relevante, es dar estilo a la etiqueta label que servirá de botón.
Con la tercera regla empieza el truco, aunque de momento sólo nos sirve para cambiar el aspecto del botón o label cuando su input precedente está seleccionado, en el ejemplo con un cambio de color.
Digo que aquí empieza el truco porque aunque esto no oculta ni revela nada, ya se puede ver cómo se controla eso. Podéis ver un input[id^="spoiler"]:checked + labelque traducido quiere decir "selecciona los INPUT con una ID cuyos primeros caracteres sean SPOILER y si están seleccionados (CHECKED), a la etiqueta LABEL que hay justo a continuacion dale las siguientes propiedades..."
De la misma manera, las dos últimas reglas nos sirven para dar estilo a la caja marcada con clase .spoiler. La penúltima para que inicialmente no se vea y la última para que se haga visible cuando su correspondiente input está pulsado.
Realmente a veces no sé si mis explicaciones sirven para aclarar o para confundir más, pero si es lo segundo, en este enlace tenéis un desarrollo en CodePen para que podáis experimentar y que además incluye algo de estilo extra para dejar todo el conjunto más mono... tal que así:
Y sin ningún problema permite añadir varios botones y contenidos de este tipo simplemente cambiando el valor de la ID de cada par input-label asociados.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
About wily
0 comentarios:
Publicar un comentario