Transizioni CSS3 in Dreamweaver CS6

• Potrebbe 9, 2024

Con l'aggiunta di HTML5 e CSS3, i siti Web interattivi stanno diventando attesi. Ora, con Dreamweaver^R CS6 e il nuovo pannello Transizioni CSS, puoi creare i tuoi effetti interattivi senza la necessità di scrivere alcun codice. L'output di questo processo è solo CSS3, senza JavaScript. Pertanto, non devi preoccuparti se lo spettatore ha abilitato JavaScript. Le transizioni create da Dreamweaver possono essere riprodotte in qualsiasi browser Web moderno.

Vediamo quanto è facile creare le nostre transizioni interattive. La transizione può essere applicata a qualsiasi classe, ID o elemento CSS. Tutto quello che dobbiamo fare è impostare i valori nel pannello Transizioni CSS.

1. Il nostro primo passo è selezionare l'elemento al quale desideriamo applicare la transizione. Nel nostro esempio sarà un collegamento al menu.
   
   
2. Fare clic su Finestra - Transizioni CSS per aprire il pannello.
   
   
3. Nel pannello Transizioni CSS, fai clic sul segno più per aggiungere una transizione.
   
   
4. Nella finestra di dialogo Nuova transizione, possiamo usare il menu Regola target per scegliere tra i preset o digitare il nostro nome per la transizione. Digitiamo il nome .morph.
   
   
5. Quindi dobbiamo scegliere l'azione che attiverà la transizione. Dal menu Transizione attiva, seleziona Passa il mouse in modo che la transizione si attivi quando posizioniamo il mouse sul collegamento. Altre opzioni includono: attivo, controllato, disabilitato, abilitato, focus, hover, indeterminato e target.
   
   
6. Per l'opzione Menu, abbiamo due opzioni. Scegliamo il primo.
   
   Usa la stessa transizione per tutte le proprietà
   Utilizzare una transizione diversa per ogni proprietà
   
   
7. Per la durata e il ritardo della transizione, possiamo usare Secondi o Millisecondi. Impostiamo la Durata su 1 secondo e il Ritardo su 0,05 secondi.
   
   
8. Per la funzione di temporizzazione, abbiamo diverse opzioni di allentamento. Scegliamo con facilità.
   
   
9. Per aggiungere una proprietà CSS, fai clic sul segno più e scegline uno dall'elenco a comparsa. Scegliamo Background-Color.
   
   
10. Dopo aver scelto una proprietà, possiamo impostare il valore finale per la transizione. A seconda della proprietà che abbiamo scelto, il menu Valore finale ci fornirà il menu corrispondente per quella proprietà. Per il colore di sfondo otteniamo il Selettore colore. Se aggiungiamo la proprietà Weight-Weight, otteniamo un menu di pesi predefiniti.
    
    
11. Infine, dobbiamo scegliere Dove creare la transizione. Le nostre scelte sono Solo questo documento o Nuovo file di fogli di stile. Usiamo il primo.
    
    

Dopo aver fatto clic sul pulsante Crea transizione, possiamo vedere che la transizione è stata elencata nel pannello Transizioni CSS, indicando che la transizione morph verrà attivata dall'azione al passaggio del mouse e applicata al target a.morph.

Se controlliamo la vista del codice, vediamo che la classe morph è stata aggiunta al collegamento.

Quando passiamo il mouse sul collegamento nella vista Dal vivo, il colore di sfondo cambierà.

E se avessimo bisogno di modificare la transizione? Possiamo farlo tramite il pannello Transizioni CSS.

1. Seleziona la transizione a.morph e l'icona Modifica diventerà attiva (icona a matita).
   
   
2. Fare clic sull'icona Modifica per aprire la finestra di dialogo Modifica transizione. Qui possiamo modificare i valori secondo necessità o aggiungere una nuova proprietà e valore finale.
   
   

Ora che abbiamo creato la transizione morph, possiamo facilmente applicarla ad altri elementi perché ora è disponibile dal menu Regola target.

* Adobe mi ha fornito una copia di questo software a scopo di revisione.

Copyright 2018 Adobe Systems Incorporated. Tutti i diritti riservati. Le schermate dei prodotti Adobe sono state ristampate con l'autorizzazione di Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Catalyst Flash e Flash Paper è / sono [a] marchi registrati o marchi commerciali di Adobe Systems Incorporated negli Stati Uniti e / o in altri paesi.

Istruzioni Video: Dreamweaver Tutorial- CSS Transitions Panel (Potrebbe 2024).