Effetto transizione con i CSS3

Corso online Responsive Design
Realizzare siti responsivi con HTML5 e CSS3.

Scritto da Luca Ruggiero nella sezione Css

Grazie ai CSS3 possiamo gestire in modo molto semplice gli effetti di transizione stilistici sugli elementi, avvalendoci del comando di base transition (e di una serie di sotto-elementi collegati) che rendono molto suggestive alcune azioni dell'utente, come il passaggio del mouse su di un elemento.

Un esempio chiarirà le idee molto meglio di tante parole:

Passa col mouse su questo box

Naturalmente l'effetto funzionerà solo se il tuo browser supporta i CSS3.

Vediamo immediatamente il codice di base con cui abbiamo generato questo effetto, partendo dal codice HTML del box:

<div id="box">Passa col mouse su questo box</div>

Vediamo quindi il codice CSS:

#box
{
    text-align: center;
    background: #000;
    color: #FFF;
    font: bold 30px arial;
    width: 600px;
    padding: 50px 0;
}
#box:hover
{
    background: #AAA;
    transition: background 0.5s;
    -o-transition: background 0.5s;
    -moz-transition: background 0.5s;
    -webkit-transition: background 0.5s;
}

Concentriamoci sul secondo blocco di codice CSS, legato all'evento "passaggio del mouse" sull'elemento in questione, anche se per semplicità didattica (a differenza della demo mostrata in precedenza) in questo primo esempio vado ad agire solo sul colore di sfondo e non anche sul colore del testo.

Utilizziamo quindi il comando transition (e le relative versioni dello stesso per renderlo compatibile con tutti i browser che supportano i CSS3) specificando come valore il comando su cui agire (ossia lo sfondo) e specificando il tempo di esecuzione dell'effetto, ossia mezzo secondo, avendo cura di utilizzare il punto e non la virgola come separatore dei decimali.

Vediamo quindi come agire su più comandi, completando il codice della demo ed impostando l'effetto sia sul colore di sfondo che su quello del testo:

#box:hover
{
    background: #AAA;
    color: #000;
    transition: background 0.5s, color 0.5s;
    -o-transition: background 0.5s, color 0.5s;
    -moz-transition: background 0.5s, color 0.5s;
    -webkit-transition: background 0.5s, color 0.5s;
}

Impostiamo quindi come valore sia background che color, separandoli con la virgola, ed impostando per ciascuno il tempo di esecuzione che, ovviamente, può anche essere diverso.

Ad esempio:

transition: background 1s, color 3s;

In questo caso la transizione sarà eseguita in un secondo sullo sfondo ed in tre secondi sul testo.

Nei casi analizzati notiamo che sia il comando di cui alla caratteristica su cui agire che la durata dell'effetto sono specificati sulla stessa riga, ma in realtà si tratta di una scorciatoia, poichè esistono una serie di comandi in "base transition" che ci permettono di specificare le diverse caratteristiche dell'effetto.

Seguono quindi le referenze della proprietà transition dei CSS3 con la spiegazione dei vari elementi che lo caratterizzano:

  • transition - accoglie tutti valori ed i riferimenti per la generazione dell'effetto di transizione, come spiegato in precedenza;
  • transition-delay - specifica il tempo di ritardo con cui la transizione deve partire;
  • transition-duration - specifica il tempo in cui la transizione deve completarsi;
  • transition-property - accoglie il nome della/e proprietà su cui agire, separandole con la virgola se si tratta di più comandi;
  • transition-timing-function - accetta come valori oppure ed il suo scopo è quello di specificare la "curva di velocità" dell'effetto.

Concludiamo quindi traducendo il precedente effetto dalla versione che vede impiegato solo il comando di base transition, specificando le caratteristiche dell'effetto ai singoli comandi dedicati:

#box:hover
{
    background: #AAA;
    color: #000;
    transition-property: background, color;
    -o-transition-property: background, color;
    -moz-transition-property: background, color;
    -webkit-transition-property: background, color;
    transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-delay: 3s;
    -o-transition-delay: 3s;
    -moz-transition-delay: 3s;
    -webkit-transition-delay: 3s;
}

Abbiamo, inoltre, impostato un ritardi di tre secondi nell'esecuzione dell'effetto.

I più cliccati della sezione Css

:: Effetto testo barrato con con i Css (43.222)

:: Referenze dei fogli di stile Css (41.354)

:: Menu ad effetto mouseover con i Css (38.148)

:: Effetti sui link con i Css (27.364)

:: Testo verticale coi Css (19.214)

:: Angoli smussati in un box coi Css (18.509)

:: Posizionare un layer centrato rispetto alla risoluzione con i Css (15.734)

:: Box con effetto ombra con i CSS3 (15.452)

:: Stilizzare i form Html con i Css (15.219)

:: CSS Expression, ovvero: integrare Javascript in un foglio di stile (14.888)

IN EVIDENZA
DOWNLOAD