Pseudoclase Css :active persistente usando Transition-delay 10.8.15
Usando un valor lo suficientemente alto en la propiedad transition-delay para evitar lo efímero de la pseudoclases Css :active
Pseudoclase Css :active persistente usando Transition-delay
Créditos: Realización original de Joel Besada publicada en su blog
Una de las características inherentes a las pseudoclases de css (:link, :visited, :hover, :active) es que su efecto es efímero. Los estilos asociados no son permanentes.
Hasta el momento, cuando se deseaba tener esa permanencia se recurría a los pseudoselectores ::checked o ::target.
Sin embargo, Joel Besada ha dado con una ingeniosa solución para que el :visited se mantenga "indefinidamente" recurriendo al delay de las transiciones Css3.
Mira y prueba su ejemplo:
Este texto sólo mantiene el color mientras permanece pulsado el button.
Este texto conserva el color incluso una vez abandonado el button.
Los códigos:
Marcado html
<button class="red button">Rojo</button>
<button class="green button">Verde</button>
<button class="blue button">Azul</button>
<p>Este texto sólo mantiene el color mientras permanece pulsado el button.</p>
<p class="perm">Este texto conserva el color incluso una vez abandonado el button.</p>
Sencillo. Tres botones para las pruebas y dos párrafos para que veas cómo el primero pierde y el segundo lo mantiene per secula seculorum. Bueno, exactamente durante 9.999.999s. Si piensas permanecer con esta ventana abierta más tiempo, avisa para aumentarlo xD
El Css asociado
/* El valor alto de delay evita que se pierda el color */
p.perm {transition: color 0s 9999999s;}
/*Al presionar el botón, se reescribe la propiedad transition
para quitar el delay, así cambia de color instantánemente */
.red:active ~ p.perm, .green:active ~ p.perm, .blue:active ~ p.perm {
transition: color 0s;}
.red:active ~ p {color: red;}
.green:active ~ p {color: green;}
.blue:active ~ p {color: blue;}
Eso es todo. Aplicamos un valor "cuasi infinito" en la transición Css para lograr la persistencia de las propiedades al elemento.
Por supuesto, sólamente funcionará con aquellas propiedades válidas para las transition css.
Nota que en este caso el empleo del selector de hermanos (~ /virgulilla/) es para aplicarlas no al propio elemento sino a un tercero
Conclusión
Ingeniosa forma de resolver la cuestión. Sencilla pero con un gran potencial para lograr ciertos efectos.
Mira la gameboy color, obra del propio "descubridor" y mueve al abuelete.
Artículo publicado originalmente el 20 de Marzo de 2012
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
He estado haciendo pruebas con este sistema aplicándolo a la siguiente situación:
ResponderEliminarLa idea es que sea el propio botón el que cambia de color y lo mantenga, o sea, replicando al típico menu que al clicar se mantiene fijo el cambio de estilo para mostrar en donde se está. La idea es para utilizarlo en una página en la que el menu te redirecciona a otra parte de la misma página, y como es muy larga en cada apartado se replica el menu para facilitar la navegación por dicha página. Así pues, no sólo deseo que se mantenga el cambio en el botón que he clickado sino también en sus clones (los que se replican a lo largo de la página, o por lo menos el de la sección a la que se ha ido al clickar. No se si me he explicado bien.
Después de varios intentos y pruebas, a base de buttons, a, etc, no consigo lo esperado. No se si es que no lo hago bien o es que no se puede.
Hola Alejandro
ResponderEliminarComo habrás visto en el ejemplo, esta técnica necesita dos premisas para funcionar:
.- que haya dos elementos por lo menos: uno recibe la acción, en este caso el :active y el otro cambia un valor.
.- Y los elementos tienen que ser hermanos. O más específico: el que recibe la acción tiene que ser hermano del contenedor padre o del ancestro del que cambia. Ya ves que usa el selector de hermano ~
<-- PSEUDO HTML -->
<botón1/> <botón2/> <botón 3/>
<Abuelo1>
<padre1>
<nieto1/>
</padre1>
<Abuelo1/>
/*** PSEUDO CSS ***/
botón1:active ~ padre1 nieto1 { declaraciones }
Para poder sugerirte algo más concreto y ajustado a tu caso se necesitaría ver tu marcado Html. Si puedes crea un ejemplo de tu esquema en jsfiddle (o similares) y pasa el enlace.
También puedes ver si te resulta mejor la técnica del :checked
Un saludo