Potete creare, modificare ed eliminare le transizioni CSS3 tramite il pannello Transizioni CSS.

Per creare una transizione CSS3, create una classe di transizione specificando i valori delle proprietà di transizione dell'elemento. Se selezionate un elemento prima di creare una classe di transizione, la classe di transizione viene applicata automaticamente all'elemento selezionato.

Potete scegliere di aggiungere il codice CSS generato al documento corrente oppure specificare un file CSS esterno.

Creare e applicare un effetto di transizione CSS3

  1. (Facoltativo) Selezionate un elemento (ad es. un paragrafo o un'intestazione) a cui volete applicare la transizione. In alternativa, potete creare una transizione e applicarla in seguito a un elemento.

  2. Selezionate Finestra > Transizioni CSS.

  3. Fate clic su .

  4. Create una classe di transizione utilizzando le opzioni della finestra di dialogo Nuova transizione.

    Regola destinazione

    Inserite un nome per il selettore. Il selettore può essere qualsiasi tipo di selettore CSS: di tag, regole, ID o composto. Ad esempio, se desiderate aggiungere effetti di transizione a tutti i tag <hr>, inserite hr

    Transizione per

    Selezionate uno stato a cui applicare una transizione. Ad esempio, se la transizione deve essere applicata quando il mouse passa sopra l'elemento, utilizzate l'opzione hover.

    Usa la stessa transizione per tutte le proprietà

    Selezionate questa opzione per specificare le stesse impostazioni di Durata, Ritardo e Funzione di temporizzazione per tutte le proprietà CSS da includere nella transizione.

    Usa una transizione differente per ciascuna proprietà

    Selezionate questa opzione per specificare impostazioni di Durata, Ritardo e Funzione di temporizzazione differenti per ciascuna delle proprietà CSS da includere nella transizione.

    Proprietà

    Fate clic su  per aggiungere una proprietà CSS alla transizione.

    Durata

    Immettete una durata in secondi (s) o in millisecondi (ms) per l'effetto di transizione.

    Ritardo

    L'intervallo di tempo, in secondi o millisecondi, allo scadere del quale viene avviato l'effetto di transizione.

    Funzione di temporizzazione

    Selezionate uno stile di transizione dalle opzioni disponibili.

    Valore finale

    Il valore finale dell'effetto di transizione. Ad esempio, se la dimensione del carattere deve aumentare fino a 40 px alla fine dell'effetto di transizione, specificate 40 px per la proprietà font-size.

    Scegliete dove creare la transizione

    Per incorporare lo stile nel documento corrente, selezionate Solo questo documento.

    Per creare un foglio di stile esterno per il codice CSS3, selezionate Nuovo file foglio di stile. Quando fate clic su Crea transizione, viene richiesto di specificare una posizione in cui salvare il nuovo file CSS. Dopo che è stato creato, il foglio di stile viene aggiunto al menu Scegliete dove creare la transizione.

Modificare effetti di transizione CSS3

  1. Nel pannello Transizioni CSS, selezionate l'effetto di transizione da modificare.

  2. Fate clic su .

  3. Utilizzate la finestra di dialogo Modifica transizione per cambiare i valori immessi in precedenza per la transizione.

Disattivare la scrittura stenografica CSS per le transizioni

  1. Selezionate Modifica > Preferenze.

  2. Selezionate Stili CSS.

  3. In Usa stenografia per, deselezionate Transizione.


Questo prodotto è concesso in licenza in base alla licenza di Attribuzione-Non commerciale-Condividi allo stesso modo 3.0 Unported di Creative Commons.  I post su Twitter™ e Facebook non sono coperti dai termini di Creative Commons.

Note legali   |   Informativa sulla privacy online