I progettisti potrebbero aver notato un uso sempre crescente delle proprietà di transizione CSS3. Le interfacce del sito Web sono state notevolmente migliorate con gli stili di animazione personalizzati, il tutto senza la necessità di JavaScript (se usato in modo sensato, ovviamente!)
In questo tutorial voglio dimostrare come possiamo costruire effetti di animazione nei campi di input HTML5. Creerò un semplice modulo di contatto con un paio di campi e un'area di testo. Usando il CSS3 :valido pseudo classe è più facile che mai personalizzare gli input di testo. Guarda il mio esempio di demo dal vivo per avere un'idea di come appare il prodotto finale.
Demo dal vivo - Scarica il codice sorgente
Avvio del documento
Dobbiamo iniziare con un file index.html vuoto utilizzando il doctype HTML5 standard. Includerò alcuni font web alternativi per arricchire il design. Ma non è nulla che influirà in modo drammatico sulla qualità del tutorial.
La sezione più interessante della pagina si riferisce alla creazione di un modulo HTML5 generico. Il pulsante di invio non fa altro che ricaricare la pagina. Tuttavia, non suggerisce che non sia possibile collegarsi a uno script PHP o Ruby di backend per l'elaborazione dei dati, o anche per la connessione tramite Ajax. Le transizioni CSS3 dovrebbero interessare solo gli stili frontend e niente di più.
Ogni input è contenuto in un div con la classe .riga per mantenere separati gli elementi. In questo modo è molto più semplice visualizzare l'etichetta proprio accanto al campo di input. E allo stesso modo includere altre notifiche o avvisi sul lato destro dei campi. A ogni input viene assegnata la classe .testo mentre l'elemento textarea è in stile usando .txtarea.
Struttura del layout CSS
Voglio entrare nel nostro codice CSS e iniziare spiegando i ripristini CSS. Uso un modello di blocco simile per reimpostare i browser su valori predefiniti simili di dimensioni dei caratteri, altezza della linea e anche ridimensionamento della casella. Inoltre sto impostando i vari tipi di carattere web e strutturando gli elementi di base con spaziatura corretta. Sentiti libero di salvare questo modello per l'uso in altri progetti web.
Entrando nella sezione del corpo centrale abbiamo un div wrapper che usa l'ID #w. Questo è centrato sulla pagina con una larghezza limitata di 660 px. Gli elementi di riga interni sono stilizzati come contenitori a blocchi, con etichette interne e campi di input modulo.
La piccola classe .req è per i caratteri asterisco richiesti utilizzati in tutte le etichette. Ma ancora più interessante è l'ultima sezione di codice per sovrascrivere il testo segnaposto interno. Non tutti i browser CSS3 supportano completamente queste proprietà, ma funzionano con motori Webkit e Mozilla aggiornati.
Noterai che i segnaposto del testo del modulo interno sono ora in corsivo e assumono una tonalità di colore di grigio / blu scuro. Trovo che questo extra CSS aiuti a distinguere dalle lettere effettive digitate dall'utente rispetto al testo campione segnaposto.
Styling con le transizioni
Voglio entrare nella sezione finale discutendo su come utilizzare le pseudo classi per eseguire animazioni. Gli stili più importanti iniziano con .testo e .txtarea classi utilizzate su ogni elemento del modulo.
Ho fatto un sacco di personalizzazione con le nuove proprietà CSS3. Notate anche come ho suddiviso le singole impostazioni dello sfondo con le loro proprietà uniche - come colore di sfondo e immagine di sfondo. Ciò è necessario quando è necessario animare il segno di spunta nell'input senza scorrere completamente da sinistra. Invece lo teniamo nascosto a destra dove è nascosto alla vista, e poi si anima dal lato destro.
Noterai anche che i codici per :messa a fuoco e :valido sono molto diversi. Questo è un altro motivo per cui dividere le proprietà è una buona idea, perché potremmo animare qualcosa in una pseudo classe ma non nell'altra. Ogni proprietà di transizione ha come target tutte le modifiche, quindi ciò significa che devi stare attento a quali proprietà vengono aggiornate.
Si consideri che l'utente potrebbe immettere un nome valido solo per eliminarlo pochi secondi dopo. Il nostro selezionatore valido dovrà rianimare nuovamente alle proprietà di base, ma mantenendo comunque il file :messa a fuoco visualizzazione delle proprietà pure. L'animazione segmentata è la chiave per far funzionare questi stili. Richiederà alcuni tentativi ed errori, ma questi effetti potrebbero anche essere duplicati su ogni browser legacy con JavaScript aggiuntivo.
Un altro aspetto del modulo animato è il pulsante di invio. Ovviamente gli effetti aggiuntivi sono trascurabili rispetto ai campi di input. Ma penso che tutte le proprietà valgano la pena di essere esaminate poiché si riferiscono l'una all'altra.
Invece di impostare varie proprietà di background ho appena usato i gradienti CSS3 e i loro prefissi specifici del fornitore. Ciò mantiene lo sfondo stabile mentre migliora ancora le ombre delle caselle tramite hover e stati attivi.
Demo dal vivo - Scarica il codice sorgente
Pensieri finali
Il processo di creazione di animazioni CSS3 formali funziona. Ci sono librerie esterne come Animate.css che possono aiutare, ma non forniscono ancora tanto supporto come JavaScript. Fortunatamente gli standard CSS3 sono abbastanza avanzati da fornire animazioni di base: hover, focus e pseudo classi simili.
Spero che questo tutorial possa offrire un esempio di base di codice per gli sviluppatori web. Puoi imparare molto semplicemente praticando tecniche per un paio d'ore. Sentiti libero di scaricare una copia dei miei codici di esempio e di giocare con impostazioni diverse. Non è così difficile come ci si potrebbe aspettare di implementare transizioni simili sul proprio sito web.