Nel riquadro CSS vengono mostrate le regole di stile definite per l'elemento selezionato, incluse le regole keyframes degli elementi animati. Puoi anche modificare gli stili delle classi dell'elemento, aggiungere stili incorporati e creare nuove regole di stile utilizzando la scheda Stili del riquadro CSS.
Per visualizzare un elenco di proprietà CSS di un elemento, vai alla scheda Elaborato.
Per creare una nuova regola di stile nel documento:
- Seleziona un elemento a cui vuoi applicare la nuova regola di stile.
- Nella parte inferiore del riquadro CSS, fai clic sul pulsante Aggiungi regola
.
- Google Web Designer genera un selettore della classe univoco che puoi modificare. Se inserisci un selettore della classe, Web Designer aggiunge quella classe all'elemento selezionato.
- Tra le parentesi della dichiarazione della nuova regola, fai clic su Aggiungi proprietà, quindi inserisci una proprietà CSS e un valore, ad esempio
width: 209px;. - Continua ad aggiungere nuove coppie di proprietà/valore fino a quando la regola è completamente definita.
.Per aggiungere uno stile incorporato a un elemento procedi nel seguente modo:
- Seleziona un elemento.
- Nel riquadro CSS, fai clic sul pulsante Aggiungi proprietà nel blocco stile incorporato.
- Aggiungi le coppie proprietà/valore per modificare lo stile dell'elemento.
Per modificare uno stile procedi nel seguente modo:
- Seleziona un elemento nel documento. Il riquadro CSS visualizza le regole di stile associate all'elemento.
- Fai clic su una proprietà o un valore per modificarli. Per eliminare una proprietà, cancella il nome.
Per attivare o disattivare una proprietà:
- Fai clic sulla casella di controllo accanto al nome di una proprietà. Se la casella di controllo non è selezionata, l'anteprima del browser e i file pubblicati non includono tale proprietà.
- Per riattivare la proprietà, fai di nuovo clic sulla casella di controllo.
Regole dei fotogrammi chiave per l'animazione
Nel riquadro CSS vengono visualizzate le regole dei fotogrammi chiave (con la parola chiave @keyframes) relative agli elementi animati tramite CSS.
Per creare una nuova regola dei fotogrammi chiave per un elemento:
- Seleziona un elemento senza animazione.
- Nella parte inferiore del riquadro CSS, fai clic sul pulsante Aggiungi regola per fotogrammi chiave
. Google Web Designer aggiunge i fotogrammi chiave iniziale e finale (0% e 100%) e imposta la durata dell'animazione a 1 secondo per impostazione predefinita.
- Per aggiungere una proprietà animata a un fotogramma chiave, fai clic su Aggiungi proprietà, quindi inserisci una proprietà CSS e un valore.
- Continua ad aggiungere nuove coppie di proprietà/valore fino a quando la regola è completamente definita.
Per aggiungere un fotogramma chiave:
- Seleziona un elemento animato.
- Nel riquadro CSS, fai clic su Inserisci fotogramma chiave tra i fotogrammi chiave esistenti.
- Web Designer imposta automaticamente il fotogramma chiave a metà tra i fotogrammi chiave circostanti. Fai clic sulla percentuale per modificare il timing dei fotogrammi chiave.
- Le proprietà animate vengono interpolate dai fotogrammi chiave circostanti. Aggiungi, modifica o elimina proprietà per il nuovo fotogramma chiave.
Non puoi aggiungere un fotogramma chiave oltre la fine dell'animazione esistente. Devi usare la sequenza temporale.