Eventi in CSS – Quarta parte

In quest'ultima fase ci serviremo di una tecnica ideata da uno studente di informatica svedese. Vediamo come generare un evento css tramite una transizione.
Eventi in CSS – Quarta parte

Quarta e ultima parte

Eccoci giunti all’ultima parte dedicata agli eventi in css. Questa tecnica che sto per descrivere è stata ideata da Joel Besada e si basa su una transizione css. Vediamo di che si tratta.

Codice html e css

Allora, l’idea è piuttosto semplice, al click dell’elemento span si crea una transizione con durata di 9999999 secondi, praticamente infinita, il quale obbliga al paragrafo di non tornare allo stato iniziale.

<span>Clicca</span>
<p class="change">Lorem Ipsum è un testo segnaposto utilizzato nel settore della tipografia e della stampa.</p>
.change{
    transition:all 9999999s;
}

span:active ~ .change{
    transition:all 0s;
    color: red;
}

Pro Contro e conclusioni

Dato l’uso della pseudo-classe :active, l’aspetto interessante di questa modalità è come la transizione rimanga sempre attiva anche quando si rilascia il tasto del mouse. Gli aspetti negativi sono senza dubbio il supporto dei browser e l’impossibilità di ritornare allo stato iniziale.

Abbiamo concluso la serie degli eventi in css. Mi raccomando, se è stata di tuo gradimento non dimenticare di condividere i post e se conosci altri metodi puoi utilizzare il box dei commenti o la nostra fanpage. A presto 😉

Provalo subito

Prova la demo Consulta il codice
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github