soy Kseso y esto EsCSS

Pseudoclase Css :active persistente usando Transition-delay

Pseudoclase Css :active persistente usando Transition-delay

·Por Kseso ✎ 2
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

avatar del Editor del blog

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 Don Kseso Kseso