Trucchi CSS: la guida definitiva per hack CSS avanzati

Se hai mai pensato di imparare alcuni trucchi CSS avanzati, questa guida è un ottimo punto di partenza. Copre i seguenti argomenti CSS;

Che cos'è Animate.CSS [Tutorial]

Questa sezione spiega come iniziare con Animate.css supporta meglio gli sviluppatori Web nella creazione di progetti animati creativi e funzionali attraverso una programmazione semplice ed efficiente. Per aggiornare i contenuti web e migliorare il design delle applicazioni, Introduzione a Animate.css [Tutorial] è un ottimo modo per creare contenuti unici. Gli sviluppatori ottengono un vantaggio rispetto ad altri siti concorrenti con funzionalità creative e diverse, contenuti più veloci e di migliore qualità e una migliore compatibilità tra browser quando condividono i contenuti dei siti Web nell'ambiente digitale. L'estensione della libreria Animate.CSS fornisce gli strumenti, la semplicità e la flessibilità per tutti i siti web e servizi di sviluppo di app mobili.

L'animazione CSS è un'estensione dei fogli di stile a cascata (CSS) con diverse funzionalità di animazione. Il modulo incorpora una libreria di design per siti Web e offre agli utenti praticità, creatività e applicazioni Web professionali. Gli sviluppatori Web Introduzione a Animate.css [Tutorial] applicano progetti di animazione, modificano sequenze CSS e migliorano la progettazione di siti Web tramite l'estensione Cascading Style Sheet. L'estensione semplifica l'interazione degli sviluppatori durante l'implementazione di progetti di animazione con configurazioni semplici per elementi HTML specifici che richiedono meno elaborazione e utilizzo della memoria da Flash o JavaScript.

Vantaggi

Senza dubbio, Animate.CSS guadagna popolarità dalla comunità degli sviluppatori per semplicità e compatibilità. Principalmente, Animate.CSS ha script di fogli di stile semplici e pronti all'uso che copiano e incollano nei documenti del sito Web degli sviluppatori per un'elevata comodità degli sviluppatori. Inoltre, il modulo è costruito per impedire agli utenti di accontentarsi di GIF generiche o immagini Flash che limitano la creatività degli sviluppatori e richiedono passaggi aggiuntivi che rallentano i tempi di completamento dello sviluppo del progetto. Inoltre, ci sono molti script di stile di progettazione di animazione abbreviata per le proprietà di animazione quando si inizia con Animate.css. È importante sottolineare che il programma Animate.CSS Cascading Styles Sheet (CSS) include estensioni di fotogrammi chiave avanzate che forniscono agli sviluppatori strumenti di sviluppo per la personalizzazione del design necessari per progetti animati creativi e funzionali. Insieme a un modulo facile da usare, Animate si dimostra anche compatibile per ulteriori aggiornamenti o miglioramenti con Javascript.

Come funzionano le animazioni in Animate.CSS

CSS animato è un modulo di libreria unico creato da un semplice e design efficace. Per spiegare, Animate.CSS include due componenti principali per lo styling dei siti web. Il primo componente stilizza e memorizza le informazioni per le animazioni CSS. Tuttavia, il secondo componente utilizza i "fotogrammi chiave" per segnalare agli sviluppatori web l'inizio e la fine delle sequenze per i progetti di animazione. Inoltre, questo componente utilizza punti di transizione avanzati per consentire una migliore configurazione dell'animazione.

Creazione di un'animazione

Le animazioni CSS includono componenti primari e sottoproprietà. Di solito, gli sviluppatori Web iniziano a utilizzare Animate.css utilizzando elementi di script specifici dello stile di Animate.CSS e includono stili di progettazione aggiuntivi per le proprietà di animazione. Più specificamente, le proprietà funzionano tra diverse funzioni di stile per dotare i siti Web di animazioni funzionali e semplici. Le proprietà dell'animazione includono ampi criteri di elementi di stile come il nome dell'animazione, la durata, i tempi e i ritardi. Altre forme includono il conteggio delle animazioni, la direzione, il riempimento e la riproduzione. Fortunatamente, il modulo libreria abilita web designer reattivi applicare queste proprietà alle animazioni di siti Web con semplici sequenze di testo, piuttosto che formattare e testare numerosi codici con incertezza funzionale.

fotogrammi chiave

Attraverso l'estensione.CSS Animate, gli utenti lavorano con "fotogrammi chiave" per creare animazioni con elementi componenti. A beneficio degli utenti, i "fotogrammi chiave" vengono impostati tramite i fogli di stile a cascata per offrire agli utenti capacità di modifica graduale dei set di stili CSS, consentendo agli sviluppatori web di concentrarsi su importanti funzionalità di animazione. Per elaborare, le "chiave di volta" aiutano gli utenti a eseguire configurazioni all'interno di tempi, durata e elementi di dettaglio approfonditi all'interno di una sequenza di progettazione diversa.

Fotogrammi chiave A regola

Inoltre, la visualizzazione delle animazioni richiede agli utenti di utilizzare "fotogrammi chiave a regola" per connettersi meglio con gli elementi dei componenti. Per configurazioni di proprietà più specifiche, l'estensione corregge i valori di animazione tra i "fotogrammi chiave" di progettazione. Ai fini dell'identificazione, gli sviluppatori web danno valore ai "keyframes at-rule" per modificare più nomi all'interno di sequenze e individuare elementi che non hanno valore per il set di stili CSS. Inoltre, la "regola dei fotogrammi chiave" espande le capacità di modifica per gli sviluppatori web con utili indicatori di codice per le animazioni per rendere meglio gli elementi durante gli stili di progettazione.

Annimate.CSS Trasforma

Altrettanto importante, le funzioni Animate.CSS di Cascading Style Sheets (CSS) offrono proprietà di "trasformazione" per una migliore modifica degli elementi. Gli elementi non compatibili con i design CSS si alterano con lo strumento di trasformazione. Vantaggiosamente, gli sviluppatori che utilizzano strumenti di trasformazione come ridimensionamento, rotazione, inclinazione e traduzione configureranno gli elementi per progettare meglio le applicazioni web. Le proprietà di trasformazione, 2d o 3d, forniscono agli utenti creatività e funzionalità di progettazione aggiuntive durante la creazione di siti Web.

Scala

Con la scala, gli utenti di Animate.CSS regolano le dimensioni dei progetti per adattarli meglio ai contenuti web. La specifica funzione di trasformazione CSS corregge la larghezza e l'altezza degli elementi per ridimensionare meglio il contenuto nelle app web. Per impostazione predefinita, i valori di scala iniziano con un attributo di uno, che si adatta a un valore maggiore o minore di una forma più o meno scalabilità per gli elementi. In parole povere, gli attributi su CSS consentono correzioni proporzionate durante la gestione delle configurazioni di ridimensionamento per la progettazione di elementi e contenuti.

storto

Per continuare, gli strumenti di trasformazione su Animate.CSS consistono in una funzione di inclinazione per gli sviluppatori web. Il design delle proprietà degli elementi si allinea con un asse orizzontale e verticale sulle app Web che potrebbero essere inclinate. In genere, le funzioni di inclinazione includono i valori "x" e "y" per aiutare gli sviluppatori a distorcere gli elementi sull'asse.

Traduci

Un'altra funzione di trasformazione è la traduzione CSS. Allo stesso modo, la funzione di traduzione condivide anche i valori "x" e "y" per supportare una migliore funzionalità di progettazione per gli sviluppatori. A differenza della funzione di inclinazione CSS, lo strumento di traduzione consente agli utenti di posizionare un particolare elemento sia sull'asse orizzontale che su quello verticale.

Ruota

Inoltre, gli sviluppatori che iniziano con Animate.css utilizzano lo strumento di trasformazione che include anche una funzione di rotazione per gli elementi. Con facilità, gli utenti possono regolare l'angolo di un elemento in qualsiasi direzione. I valori di rotazione sono positivi quando si ruota il contenuto in senso orario e scendono a valori negativi quando si regola un elemento in senso antiorario.

Matrice

Infine, le funzionalità di trasformazione CSS includono funzioni di matrice per gli elementi. Particolarmente utile per gli sviluppatori, lo strumento matrice unisce le configurazioni 2D su un singolo elemento per applicazioni di editing universali.

Animazione CSS con aggiunta di acqua

Il sistema Animate.CSS fa riferimento a "Just-Add-Water". Il modulo si classifica come una fonte di animazioni "cross-browser" che indica la sua facilità d'uso e il design semplice per sviluppatori web nuovi o affermati.

Installazione

Per iniziare, gli amministratori richiedono l'installazione del programma Just Add Water Cascading Style Sheets Animation. Innanzitutto, l'installazione avviene tramite NPM. Per definire, il Node Package Manager collabora con JavaScript script, che condivide il design di Animate.CSS. Per impostazione predefinita, il linguaggio di programmazione opera con Node.JS come premessa stabile per lo sviluppo web. Successivamente, gli utenti utilizzano questo codice "$ Node Package Manager install animate.css –save" per installare il programma.

In alternativa, la sequenza segue "$ filato aggiungi animate.css". Per spiegare ulteriormente, un'installazione di filati aiuta anche gli amministratori con le installazioni del progetto. Normalmente, "Yarn" associa le installazioni a dipendenze che utilizzano codici o un'altra decenza per l'installazione. A differenza del metodo di installazione di Node Packaging Manager (npm), l'alternativa "yarn" non applica "–save" o "–sav-dev" quando si aggiungono nuovi programmi. In modo approfondito, una dipendenza non può funzionare se non con il supporto di un altro programma più importante. La combinazione del modulo e delle estensioni di installazione collabora con nuovi modelli di libreria innovativi.

Utilizzo di Animate.CSS [Tutorial]

Sul sito Web Animate.CSS sono disponibili codici open source per gli sviluppatori Web. L'utente può selezionare il Scarica Animate.css per accedere a diversi testi di animazione del foglio di stile a cascata. L'elenco include un'ampia varietà di stili di design e può essere applicato direttamente al sito Web dell'utente. Inoltre, il scaricare il codice è un altro metodo per iniziare con Animate.Css.

Iniziare con Animate.CSS sui siti web

L'applicazione dei fogli di stile Cascading Style Sheets (CSS) al sito Web dello sviluppatore è facile, veloce ed efficace. Tuttavia, l'implementazione del testo richiede l'attenzione dell'utente ai dettagli. Innanzitutto, il foglio di stile animato.CSS Cascading Style Sheets (CSS) deve essere posizionato correttamente all'interno del documento dello sviluppatore " .” Successivamente, l'amministratore applica la classe del foglio di stile "animato" a un elemento all'interno del documento dell'applicazione web. Inoltre, lo script animato segue i nomi CSS per eseguire funzioni di animazione specifiche per l'elemento. In alternativa, gli utenti possono passare ad altre versioni, come CDNJS, come un altro host per le configurazioni degli elementi Annimate.CSS. Il formato è mostrato di seguito:

Animazioni su Animate.CSS

I web designer che iniziano con Animate.css apprezzano l'animazione semplice e di qualità che differenzia i contenuti sulle applicazioni web. I fogli di stile di animazione forniti su Animate.CSS includono un'abbondanza di stili di animazione Cascading Style Sheet (CSS) che personalizzano gli elementi del documento. Inoltre, per creare un design di animazione per un elemento, lo sviluppatore deve inserire il tag "animato". La classe si incorpora all'interno di un elemento del documento e richiede istruzioni aggiuntive per definire meglio gli attributi del contenuto. Comunemente, gli sviluppatori si affidano a un elemento attivo con una funzionalità impostata su "infinito" per abilitare più cicli di progetti di animazione all'interno di un sito web. Inoltre, molto apprezzati, i vincoli di durata sulle animazioni, insieme ai ritardi e all'interazione dell'animazione dell'utente sono disponibili nell'elenco dei fogli di stile Animate.CSS.

Avvia animazioni a tempo

Per la maggior parte, gli sviluppatori web che iniziano con Annimate.CSS cercano progetti di animazione per migliorare il contenuto dei siti web. Ragionevolmente, l'animazione dovrebbe essere in grado di fungere da metodo per attirare i visitatori del sito verso particolari informazioni sui siti. Pertanto, gli sviluppatori dovrebbero capire come configurare gli elementi in relazione a ritardi, velocità e tempi dell'animazione.

Ritardo

Attualmente, Animate.CSS aiuta gli sviluppatori con funzioni di ritardo con un particolare foglio di stile. Ad esempio, un foglio di stile con una funzione di ritardo potrebbe apparire così: " Esempio .” In questo scenario, si verifica un ritardo di due secondi per un elemento a cui è collegata una classe di animazione di rimbalzo. Le classi di ritardo si identificano come "ritardo" e possono alterare le funzioni di ritardo da uno a cinque secondi. Ulteriori periodi di ritardo sono accettabili se gli utenti aggiungono testi CSS (Cascading Style Sheet), in particolare il codice.

Velocità

Inoltre, i progetti di elementi su Annimate.CSS hanno valori di tempo di velocità. Lo sviluppatore può correggere la velocità di un'animazione utilizzando un foglio di stile specifico per la classe. Ad esempio, una sequenza temporale di animazione potrebbe assomigliare a questa: " Esempio .” Inoltre, lo sviluppatore consente all'elemento animato di rimbalzare e crea una funzione di velocità "più veloce". Inoltre, i nomi delle classi possono riferirsi a "lento", "più lento", "veloce" e "più veloce". Insieme ai nomi delle classi, i tempi di velocità come "2 secondi", "3 secondi", "800 millisecondi" e "500 millisecondi" riguardano la velocità della funzione degli elementi. Per impostazione predefinita, le frequenze degli elementi sono impostate su un valore standard di un secondo. Gli utenti, con estensioni aggiuntive, possono modificare i tempi modificando manualmente il testo all'interno dei fogli di stile Annimate.CSS Cascading Style Sheets (CSS).

Avvia build personalizzate

In precedenza menzionato, gli sviluppatori possono regolare manualmente i fogli di stile Animate.CSS per sviluppare nuove animazioni separate dai valori predefiniti standard. Un'altra fonte, come "gulp.js”, è compatibile con Animate.CSS e offre animazioni personalizzate facili da configurare. Più specificamente, la piattaforma cross-browser è un programma di automazione per lo sviluppo di attività. Per gli sviluppatori Web e i programmatori, l'estensione Gulp analizza e organizza una varietà di file basati su pipe per supportare i plug-in sui server degli utenti. In questo caso, Gulp interagisce con le dipendenze per la creazione di build e funzioni di animazione personalizzate.

Ad esempio, la fase iniziale chiama gli sviluppatori a inserire lo script del foglio di stile "$ cd path/to/animate.css/." Ancora una volta, l'amministratore indirizza il documento con un "$ npm install". Successivamente, gli sviluppatori web si uniranno alle build nel programma di packaging "NPX Gulp". Inoltre, la confezione all'interno di Gulp è regolabile per includere stili di design animati per adattarsi al contenuto web. Gli utenti modificherebbero questo pacchetto con uno script "animate-config.json" per selezionare e scegliere le build appropriate. La selezione delle opzioni di build con i valori "true" e "false" determina quali build vengono aggiunte o rimosse dall'elenco NPX Gulp.

Scrivere un buon codice è molto più che ottenere i risultati desiderati su una pagina web. Un buon codice dovrebbe essere il più efficiente e conciso possibile. Sebbene ci siano spesso numerosi modi per ottenere gli stessi risultati, il metodo più succinto e semplice è, con poche eccezioni, la scelta ideale.

Ci sono due vantaggi principali nello scrivere codice buono e pulito. In primo luogo, può drammaticamente migliorare la velocità e le prestazioni del sito. Più piccolo è il tuo file (e meno richieste esterne invii) meno tempo impiegherà il tuo sito web per caricarsi nel browser. In secondo luogo, scrivere un buon codice ha l'inestimabile vantaggio di semplificarne la manutenzione. Sia che tu stia codificando un progetto da solo o con altri sviluppatori coinvolti, più il tuo codice è snello (idealmente con una buona documentazione), meno sarà un mal di testa per chiunque debba rivisitare la base di codice.

Le migliori pratiche per scrivere un buon codice sono spesso applicabili a tutti i linguaggi di programmazione, anche se questo post sarà specificamente personalizzato per migliorare il CSS sul tuo sito web.

Rimuovi le richieste HTTP non necessarie

Molte volte nel processo di sviluppo di un sito Web, potresti ritrovarti con più file esterni e dipendenze collegati dal tuo documento HTML o file CSS. Puoi provare diversi tipi di carattere o framework CSS, ospitati su un CDN esterno. Ognuna di queste dipendenze rappresenta una richiesta HTTP che il tuo sito effettua ogni volta che viene caricato nel browser. Ciò mette a dura prova il tempo di caricamento del sito e tutte queste richieste si sommano abbastanza rapidamente.

Se hai aggiunto una serie di file di font esterni al tuo progetto, ma al momento stai facendo riferimento solo a 1 o 2 nel tuo file CSS, esamina e rimuovi una di queste dipendenze collegate dal <head> del tuo documento HTML.

Stai usando un framework CSS solo per poche righe di codice? Considera di copiare e incollare queste righe sul tuo main your .css foglio di stile e rimuovere il collegamento al codice del framework CSS originale.

Semplifica e consolida le regole CSS

Durante la scrittura di CSS, potresti finire per scrivere ripetutamente le stesse regole per vari elementi e selettori diversi. Nella programmazione per computer, il concetto spesso ripetuto di “DRY” (Don't Repeat Yourself) si applica anche ai CSS. Ogni volta che ti ritrovi a scrivere le stesse regole CSS per diversi selettori, trova un modo per consolidarle.

Ad esempio, invece di scrivere:

p { dimensione del carattere: 14px; margine: 0 automatico; display: blocco in linea; } ​ h1 { margine: 0 auto; } ​ img { display: inline-block; margine: 0 automatico; }

 

Considera di scrivere:

p, h1, img { margin: 0 auto; } ​ p { dimensione del carattere: 14px; } ​ p, img { display: inline-block; }

 

O ancora meglio:

/* applicato agli elementi p, h1 e img */ .def-margin { margin: 0 auto; } ​ /* applicato all'elemento p */ .def-fs { font-size: 14px; } ​ /* applicato agli elementi pe img */ .d-ib { display: inline-block; }

 

Anche se questa potrebbe non sembrare una grande differenza (almeno in termini di righe di codice), il conteggio totale dei caratteri è stato notevolmente ridotto, il che avrà un impatto sui tempi di caricamento della pagina. Inoltre, consolida elementi e selettori che utilizzano gli stessi stili, rendendo più chiaro per vedere quali stili comuni vengono applicati a elementi diversi.

 Rivaluta il tuo ID e i valori della tua classe

Spesso si è tentati di assegnare un aspetto della presentazione dello stile come valori di classe o ID, ma questo è tutt'altro che ideale. Ad esempio, per un messaggio di errore, spesso può sembrare sensato utilizzare red come classe o valore ID, in questo modo:

Questo è un messaggio di errore

 

Ma cosa succede se cambi il colore o altri stili di questa classe? Questa classe non avrà più una relazione diretta con il suo contenuto o la sua presentazione e molto probabilmente causerà confusione. Una scelta migliore in questa situazione sarebbe quella di utilizzare un valore di classe che spieghi la sua funzione, piuttosto che la sua presentazione stilistica:

Questo è un messaggio di errore

 

È sempre una buona idea usare i valori di classe e ID che descrivono il contenuto o la funzione di quell'elemento, piuttosto che qualsiasi descrizione stilistica. Lo stile può cambiare molte volte durante il processo di creazione di un sito, ma l'uso di descrittori per le funzioni renderà il codice molto più leggibile e facile da mantenere.

Rivaluta le scelte del selettore

Ci sono spesso molti modi diversi di selezionare un elemento, ma spesso ci sono modi più efficienti di altri. Sebbene sia possibile nidificare i selettori l'uno dentro l'altro per arrivare a un elemento specifico, se ti trovi a dover inserire troppi livelli, potrebbe essere meglio rivalutare se un valore di classe o ID funzionerebbe meglio.

Controlla gli esuberi

Nel processo di stile della tua pagina web, puoi provare una varietà di colori diversi, ad esempio molte sfumature dello stesso colore. È facile lasciare questi diversi set di regole nel codice, senza decidere su un singolo colore definitivo. Un buon strumento da utilizzare per verificare questi tipi di esuberi è cssstats.com.

Questo non solo semplificherà il tuo codice, ma renderà anche il tuo design generale molto più coerente, piuttosto che avere 40 diverse sfumature di colore sul sito.

Minimizza i tuoi file CSS

Una volta che i file CSS sono completamente pronti per la produzione e la distribuzione su un server live, è una buona idea minimizzarli per ottenere le migliori prestazioni. Un minifier rimuoverà tutti gli spazi bianchi dal codice sorgente, riducendo significativamente la dimensione del file. Poiché il codice sorgente non si basa sullo spazio vuoto per la sua funzionalità (solo la sua leggibilità), ciò non avrà alcun effetto negativo sul funzionamento del tuo sito.

Esistono molti strumenti gratuiti per minimizzare CSS (e file JS). Un'opzione è cssminifier.com 

Consolida i tuoi file CSS

Come è stato brevemente accennato nell'ultimo post, è una buona idea consolidare il più possibile le proprie risorse. Sebbene ci sia un buon argomento per mantenere i CSS modulari durante la fase di sviluppo (come mantenere le regole di layout in un file CSS, le opzioni di colore in un altro, ecc.) - alla fine vorrai consolidare tutte queste regole CSS in un singolo file per la prestazione migliore.

Animazioni CSS3 native

Sebbene biblioteche popolari come Animate.css rendono facile aggiungere animazioni CSS al tuo progetto, sono in gran parte costituiti da movimenti comuni come "rimbalzo", "agitazione" e altri movimenti di stock che possono sembrare piuttosto stantii se usati in modo eccessivo. Sfruttando le proprietà di animazione integrate nei CSS, puoi creare animazioni molto più complesse e personalizzate che vanno ben oltre il semplice movimento. Le animazioni CSS possono influenzare il colore degli elementi, le dimensioni, la posizione o qualsiasi altra proprietà disponibile nelle specifiche CSS3. Questo post fornirà un'introduzione per iniziare con le proprietà CSS3 native e alcuni esempi di possibili usi per loro.

Aggiunta di animazione a un elemento

Per dare un'animazione a un elemento HTML, i primi due passaggi sono dichiarare un nome per l'animazione e una durata. Questo è fatto con il animation-name e animation-duration proprietà:

#miaAnimazione {
    nome-animazione: cambio di colore;
    durata-animazione animation: 5s;
}

 

animation-duration può accettare qualsiasi valore in secondi o millisecondi (dichiarato usando s or ms dopo un numero intero).

Creare l'animazione

Dopo aver dichiarato un nome e una durata, è il momento di creare l'animazione. Questo viene fatto usando il @keyframes regola, seguito dal nome dell'animazione:

@fotogrammi chiave cambio di colore {
    
}

 

All'interno del @keyframes regola sarà una regola per ogni "fotogramma" dell'animazione, designato da un valore percentuale da 0% a 100%. 0% è l'inizio dell'animazione, 100% essendo la fine, con qualsiasi valore percentuale possibile in mezzo. Questo può essere pensato come un video o un flipbook, in cui ogni pagina del libro è una cornice unica che, se combinata, crea movimento:

@fotogrammi chiave cambio di colore {
    0% {
        background-color: Nero;
    }  
    50% {
        background-color: grigio;
    }
    100% {
        background-color: bianca;
    }
}

 

Nell'esempio sopra, il color-change l'animazione cambierà il background-color della #myAnimation elemento da black at 0%, gray at 50% poi finalmente a white at 100%.

Il potere dell'utilizzo di animazioni personalizzate, tuttavia, è che puoi modificare assolutamente qualsiasi proprietà CSS, con qualsiasi livello di modifica incrementale nei fotogrammi. Un buon esempio di questo è per :hover pseudo-classi. CSS :hover gli stati sono spesso usati per applicare un colore o una modifica stilistica minore quando si passa sopra un elemento con il mouse, ma le animazioni consentono a queste modifiche di essere molto più dettagliate.

pulsante:librarsi {
    nome-animazione: pulsante-anim;
    durata-animazione animation: 5s;
    modalità di riempimento-animazione: in avanti;
}
@fotogrammi chiave pulsante-anim {
    0% {
        background-color: blu;
    }
    50% {
        trasformare: scala(2.1);
        background-color: Dodgerblue;
    }
    75% {
        trasformare: scala(2.5);
        background-color: bianca;
    }
    100% {
        trasformare: scala(1.5);
        background-color: blu;
    }
}

 

Nell'esempio sopra il button-anim effetti di animazione qualsiasi button elemento quando viene posizionato sopra. Suo background-color cambia in quattro passaggi uguali per una durata di 5 secondi, con la dimensione dell'elemento stesso che cambia anche in passaggi discreti e unici (originale, a 2.1x, a 2.5x, quindi a 1.5x l'originale).

Una proprietà aggiuntiva inclusa nell'esempio sopra è il animation-fill-mode proprietà. Questa proprietà può essere utilizzata per indicare come devono essere applicati gli stili prima (e dopo) il completamento della durata dell'animazione. Usando animation-fill-mode: forwards indica che gli stili nell'ultimo fotogramma dell'animazione (quelli nel 100% regola) rimarrà applicato. Senza l'aggiunta di animation-fill-mode proprietà, gli stili di button sarebbero tornati allo stato originale una volta completata l'animazione.

Conclusione

Le animazioni CSS possono essere molto complesse e dettagliate, con fino a 100 frame distinti che possono essere specificati. Considerando che questa funzionalità è disponibile nativamente in CSS vanilla, sono un ottimo modo per aggiungere interesse visivo e complessità a un progetto web, ben supportato in tutti i browser moderni.

Utilizzo dei gradienti di colore in CSS3

Dall'introduzione di CSS3, è stato possibile utilizzare i gradienti di colore come sfondo, con 2 o più colori che sfumano gradualmente l'uno nell'altro. In precedenza, la creazione di sfumature doveva essere eseguita utilizzando Photoshop o altro modifica delle immagini Software. Usato in modo efficace, questo è un ottimo modo per aggiungere interesse e persino consistenza ai progetti di pagine Web, oltre ai soli colori di sfondo statici. Sebbene le versioni precedenti di Internet Explorer non supportino questa funzionalità, puoi aggiungerle in sicurezza a un progetto, poiché tutti i browser moderni la supportano. Questo post esaminerà l'utilizzo di sfondi sfumati e le opzioni di personalizzazione disponibili.

Gradienti lineari di base

Per impostare lo sfondo di un elemento (che sia il body, con div, o altro elemento), il background viene utilizzata la proprietà, in genere con un valore di colore:

corpo { sfondo: #fffbed; }

 

Per utilizzare una sfumatura lineare invece di un colore a tinta unita, includi almeno due colori (utilizzando valori esadecimali, rgb, hsl o colori denominati), separati da virgole, all'interno del linear-gradient() valore:

body { background: linear-gradient(#fffbed, #45add3); }

Prefissi fornitore Ven

Poiché diversi browser gestiscono il linear-gradient valore in modo diverso, si consiglia vivamente di utilizzare i prefissi del fornitore insieme ad esso. Ciò garantirà che il valore sia compreso da Safari, Firefox, Chrome e Opera. Per utilizzare i prefissi del fornitore, aggiungi semplicemente 2 ulteriori XNUMX background regole con il linear-gradient valore preceduto da -webkit- e -moz-. Dovrebbero anche apparire prima della regola normale senza alcun prefisso del fornitore:

body { background: -webkit-linear-gradient(#fffbed, #45add3); sfondo: -moz-linear-gradient(#fffbed, #45add3); sfondo: gradiente lineare(#fffbed, #45add3); }

 

È una digitazione un po' in più, ma garantisce che i tuoi gradienti siano supportati su tutti i principali browser.

Direzione di controllo

Per impostazione predefinita, i gradienti passeranno dall'alto verso il basso, con il primo colore incluso nel linear-gradient valore è il colore superiore.

Puoi cambiare la direzione del gradiente, tuttavia, aggiungendo alcune parole chiave di direzione prima dei colori (ad es to top, to bottom, to right, to left, to right top, Ecc)

body { background: linear-gradient(a destra in basso, #fffbed, #45add3); }

 

Quando si imposta la direzione su un angolo, è possibile indicare per primo l'asse x o y (ad es to right bottom e to bottom right sono uguali).

Colori multipli

Puoi utilizzare più di due colori in un gradiente, semplicemente separandoli da una virgola:

body { background: linear-gradient(#eaecee, #abebc6, #45add3); }

or

body { background: linear-gradient(#eaecee, #ebdef0, #f4f6f7, #abebc6, #4eb39d, #45add3); }

 

Il colore si ferma

A volte vorrai controllare dove inizia un determinato colore, consentendo a determinati colori di occupare più spazio o di avere uno spazio più ampio per la transizione. Per aggiungere questi "stop colore", basta aggiungere un valore percentuale dopo un dato colore, per designare dove dovrebbe iniziare quel colore:

body { background: linear-gradient(#eaecee, #abebc6 30%, #45add3 %80); }

 

Questo è ottimo per avere un controllo più preciso sulle transizioni e può essere utilizzato per effetti interessanti.

Gradienti radiali

Una variazione disponibile sui gradienti lineari sono i gradienti radiali. I gradienti radiali passeranno dal centro dell'elemento, passando verso l'esterno come un cerchio. Usano quasi la stessa identica sintassi dei gradienti lineari, solo con il radial-gradient valore invece:

body { background: radial-gradient(#eaecee, #45add3); }

 

Una panoramica del posizionamento CSS

Una delle proprietà più importanti da comprendere nei CSS è la position proprietà. Sebbene si possa fare molto per il layout degli elementi su una pagina senza modificare esplicitamente i valori per il position proprietà, la maggior parte problemi di layout avanzati richiederà la conoscenza dei diversi valori disponibili per questa proprietà. Questo post del blog esaminerà i quattro valori principali per positione le istanze in cui potresti utilizzare ciascuno di essi.

Posizione statica

static è il valore predefinito di position, il che significa che per qualsiasi elemento non imposti esplicitamente alcun valore per position, sarà static per impostazione predefinita. Elementi con a position of static non accetterà alcuna proprietà di offset della casella, come margin or padding .

Nell'esempio seguente, ciascuno div verranno impilati uno sopra l'altro, poiché ciascuno è un elemento a livello di blocco:

Unità 1 Unità 1 Unità 2 Unità 2

 

corpo { famiglia di caratteri: Helvetica; colore bianco; } .container { background-color: #fffbed; } .unit { background-color: #337e7e; altezza: 80px; larghezza: 80px; allineamento del testo: centro; altezza della linea: 80px; bordo: #696969 2px solido; }

 

Posizione relativa

Elementi con a position of relative sono molto simili al valore di static, sebbene con una grande differenza: possono accettare proprietà di offset del riquadro di top, right, bottome left.

Nel caso di un elemento con a position of relative, queste proprietà di offset impostano la distanza dalla posizione normale degli elementi. In altre parole, se dovessi impostare un elemento con a position of relative avere un top valore di 10px, l'elemento apparirà 10px inferiore a quello che normalmente apparirebbe se fosse position sono stati static.

Elementi con a position of relative rimanere all'interno del normale "flusso" degli elementi, le proprietà di offset del riquadro spostano semplicemente gli elementi dal loro flusso normale:

Unità 1 Unità 1 Unità 2 Unità 2

 

corpo { famiglia di caratteri: Helvetica; colore bianco; } .container { background-color: #fffbed; } .unit { background-color: #337e7e; altezza: 80px; larghezza: 80px; allineamento del testo: centro; altezza della linea: 80px; bordo: #696969 2px solido; posizione: relativa; } .unit-1 { in alto: 10px; } .unit-2 { destra: 30px; } .unit-3 { sinistra: 20px; } .unit-4 { fondo: -30px; a destra: 40 pixel; }

 

Posizione assoluta

Elementi con a position of absolute accettano anche proprietà di offset del riquadro, sebbene vengano rimosse dal normale flusso di elementi. Utilizzo delle proprietà di offset del riquadro su un'immagine absolute l'elemento posizionato posizionerà quell'elemento in relazione diretta al suo elemento genitore.

Prendendo lo stesso identico CSS del position: relative; esempio sopra, ma semplicemente cambiando il position a absolute comporterà un posizionamento completamente diverso dei singoli elementi:

Unità 1 Unità 1 Unità 2 Unità 2

 

corpo { famiglia di caratteri: Helvetica; colore bianco; } .container { background-color: #fffbed; } .unit { background-color: #337e7e; altezza: 80px; larghezza: 80px; allineamento del testo: centro; altezza della linea: 80px; bordo: #696969 2px solido; posizione: assoluta; } .unit-1 { in alto: 10px; } .unit-2 { destra: 30px; } .unit-3 { sinistra: 20px; } .unit-4 { fondo: -30px; a destra: 40 pixel; }

 

Posizione fissa

Un elemento con a position of fixed è molto simile a position: relative;, sebbene la posizione sia relativa alla finestra del browser, piuttosto che a qualsiasi elemento padre. Inoltre, l'elemento non scorrerà con la pagina, rimanendo "fisso" e sempre visibile, indipendentemente da dove si trova l'utente sulla pagina. Questo è spesso usato per "aggiustare" intestazioni e piè di pagina alla pagina, in modo da rimanere sempre visibili.

Una panoramica dei selettori CSS

Nello sviluppo web ci sono spesso numerosi modi per ottenere lo stesso risultato. Una chiave per scrivere un buon codice (indipendentemente dalla lingua) è usare il metodo più efficiente possibile, scrivendo meno codice necessario e mantenendo la base di codice al minimo assoluto. Ciò si tradurrà in tempi di caricamento della pagina più rapidi, nonché in chiarezza nel codice sorgente per te e altri sviluppatori. Nello scrivere CSS, è importante sapere come selezionare gli elementi che si desidera scegliere come target e il metodo migliore per farlo. Questa sezione esaminerà alcuni dei selettori CSS più comuni e le migliori istanze in cui utilizzare ciascuno di essi.

Selettori di tipo

Per ogni elemento HTML, esiste un selettore corrispondente per quel tipo di elemento. Che si tratti di un div, p, img o qualsiasi altro elemento HTML, il selettore CSS corrispondente è esattamente lo stesso, meno le parentesi angolari utilizzate nel tag:

p { colore: nero; } div { display: inline: block; } img { larghezza: 200 px; }

 

I selettori di tipo sono ideali quando vuoi scegliere come target ogni istanza di un determinato tipo di elemento e applicare gli stessi stili a tutti.

Selettori di classe

I selettori di classe utilizzano un nome di classe associato a elementi specifici. Questo selettore è ideale quando si desidera applicare determinati stili a una varietà di elementi diversi, indipendentemente dal tipo di elemento. Ad esempio, potresti avere una classe di .responsive applicato a un p, div e img elemento:

Questo paragrafo è reattivo Un div . reattivo

 

Il seguente blocco di codice CSS avrà come target tutti questi elementi con la stessa classe:

.responsive { larghezza: 80%; margine: 0 automatico; }

 

I selettori di classe sono sempre designati in un foglio di stile utilizzando un punto (.) prima del nome della classe.

Selettori ID

I selettori ID sono simili ai selettori di classe, sebbene possano essere applicati solo a un singolo elemento in un determinato documento HTML. Questo è utile quando - esclusivamente. vuoi scegliere come target un singolo elemento:

Questo è un paragrafo con stili unici

#myParagraph { color: green: width: 200px; galleggiante: sinistro; display: blocco in linea; }

 

I selettori di ID sono sempre designati in un foglio di stile utilizzando il cancelletto o il cancelletto (#) prima del nome ID.

Selettore universale

Il selettore universale sceglierà come target ogni singolo elemento in un documento HTML. Questo è spesso usato per i reset CSS, come la rimozione di margini predefiniti, padding e altri stili da tutti gli elementi:

* { margine: 0; imbottitura: 0; }

 

Il selettore universale è designato con l'asterisco (*).

:hover

Un altro selettore comune (e una delle tante "pseudo-classi") CSS è :hover. L'aggiunta di questa pseudo-classe a qualsiasi selettore avrà come obiettivo lo stato al passaggio del mouse dell'elemento. Ciò significa che questi stili lo faranno - esclusivamente. essere applicato quando un utente passa con il mouse su quell'elemento:

a:hover { decorazione del testo: sottolineato; colore viola; }

 

:hover viene spesso utilizzato per i collegamenti o per qualsiasi elemento che si desidera evidenziare quando l'utente passa con il mouse su di esso. Questa pseudo-classe funziona bene per gli utenti di laptop e desktop, sebbene non abbia un reale utilizzo per i dispositivi mobili, a causa della mancanza di un cursore del mouse.

Comprendere la specificità nei CSS

Nel processo di scrittura del codice CSS, ti imbatterai invariabilmente in situazioni in cui il codice appena scritto sembra non avere alcun effetto sulla pagina. Questo può essere frustrante, confuso e difficile da risolvere senza l'aiuto di qualcosa come Strumenti per sviluppatori di Chrome. Tuttavia, avere una migliore comprensione di come funziona la specificità e la cascata nei CSS può fare molto per mitigare del tutto questi problemi. Questa sezione mirerà a evidenziare alcuni dei problemi principali che in genere si presentano quando si cerca di determinare quale pezzo di codice sta bloccando ciò che si sta tentando di fare.

È risaputo che CSS (che sta per Cascading Style Sheets) funziona dall'alto verso il basso. Ciò significa che, in generale, il codice che si trova più in basso nel documento ha la precedenza su altro codice più in alto. Un semplice esempio di ciò è avere due dichiarazioni che prendono di mira lo stesso elemento:

 

p { colore: blu; } p { colore: verde; }

 

Il colore degli elementi del paragrafo in questo esempio sarà sempre verde, poiché appare dopo la dichiarazione che assegna il colore blu ai paragrafi.

Il problema è che i selettori oltre ai selettori di elementi hanno diversi livelli di specificità e la combinazione di selettori aumenterà la loro specificità, ignorando altre regole.

Elementi e pseudo-elementi

Gli elementi e gli pseudo-elementi hanno il livello di specificità più basso. Dal momento che prendono di mira per tutti i nostri marchi storici istanze di un determinato elemento, l'utilizzo dei selettori di elementi dovrebbe essere utilizzato solo quando si desidera realmente applicare quegli stili a per tutti i nostri marchi storici istanze di paragrafi, div, intestazioni, ecc. Ad esempio, il codice seguente applicherà un bordo nero solido di 1 pixel a tutti gli elementi di paragrafo nel documento.

 

p { bordo: 1px nero pieno; }

 

Classi, attributi e pseudo-classi

Classi, attributi e pseudo-classi hanno un livello di specificità più elevato e si applicheranno solo agli elementi ad essi associati. Sono riutilizzabili, nel senso che puoi applicare le classi a più elementi diversi, ogni volta che vuoi che condividano gli stessi stili. Questi stili sovrascriveranno anche gli stili che sono in conflitto con quelli a livello di elemento. Nell'esempio seguente, tutti gli elementi del paragrafo saranno verdi, tranne quelli con la classe di class alert, che sarà rosso:

 

p { colore: verde; } p.avviso { colore: rosso; }

 

ID

Gli ID hanno uno dei più alti livelli di specificità e sovrascriveranno quasi tutto. A differenza delle classi che possono essere riutilizzate tutte le volte che vuoi, gli ID dovrebbero essere applicati solo a a singolo elemento sulla pagina.

 

p#myParagraph { color: black; } p.avviso { colore: rosso; } p { colore: verde; }

 

Anche se ci sono due ulteriori dichiarazioni per i paragrafi sotto il p#myParagraph dichiarazione, l'ID di #myParagraph sarà sempre nero.

Stili in linea

Gli stili in linea hanno un livello di specificità ancora più elevato rispetto agli ID. Sebbene sia generalmente molto disapprovato applicare qualsiasi stile in linea, poiché rende difficile trovare e gestire gli stili applicati agli elementi, ci sono situazioni in cui può essere giustificato.

Il mio paragrafo rosso

 

Lo stile in linea sopra sarà sempre rosso, indipendentemente dagli stili applicati altrove.*

!important

L'unico avvertimento a quanto sopra, anche includendo gli stili in linea, è l'uso di !important. Ogni volta !important viene aggiunto a una regola CSS, questa regola avrà la precedenza su tutte le altre, sempre e comunque:

 

p { colore: blu !importante; }

 

!important può essere un vero toccasana quando non riesci a capire cosa sta bloccando il tuo CSS, ma può anche essere facilmente abusato e rendere il tuo codice più disordinato. Come regola generale, utilizzare !important solo quando tutto il resto fallisce.

Uno strumento estremamente utile per una migliore comprensione e verifica della specificità è Calcolatore di specificità di Keegan Street. In caso di dubbio, può essere molto utile controllare i tuoi selettori qui.

Utilizzo di WOW.js e Animate.css per le animazioni attivate dallo scorrimento

Le animazioni sono un ottimo modo per aggiungere eccitazione visiva e movimento ai tuoi siti Web e al popolare animation.css La libreria ha fornito un modo semplice per aggiungere animazioni basate su CSS a qualsiasi sito web. E se volessi attivare queste animazioni solo dopo che l'utente è passato a una sezione specifica del tuo sito web?

Questo può ovviamente essere ottenuto tramite jQuery, ma l'utilizzo della libreria JavaScript solo per quella funzione aggiunge un volume non necessario per una funzione che può essere altrimenti eseguita da un semplice script. WOW.js risolve questo problema, offrendo una libreria di facile utilizzo per l'aggiunta di animazioni attivate tramite scorrimento, senza bisogno di jQuery, in soli 3kB.

Questo post fornirà una guida sull'utilizzo di WOW.js e animate.css per i tuoi progetti web, incluse varie opzioni disponibili per l'installazione.Click to Tweet

Se sei interessato a conoscere diverse animazioni oltre agli effetti di scorrimento, vai all'ultima sezione di questo post del blog per un elenco di altre librerie di animazioni CSS e Javascript.

Informazioni su animate.css

L'utilizzo delle animazioni CSS è un metodo semplice e diretto per aggiungere effetti visivi accattivanti a qualsiasi sito Web HTML. Una delle librerie più popolari per le animazioni CSS è animate.css. Sebbene la libreria possa essere piccola, è uno strumento perfetto per gli sviluppatori web alle prime armi che stanno cercando di aggiungere più sperma al loro sito Web senza l'uso complesso del keyframing. Mentre questo post sul blog discuterà principalmente di come utilizzare WOW.js, il file animate.css è estremamente versatile e può essere utilizzato anche con altri file.

Alcune delle tante animazioni che puoi aggiungere agli elementi del tuo sito includono:

• Animazioni statiche: questi tipi di animazioni vengono visualizzati quando carichi e apri una pagina web. In altre parole, nessuno scorrimento (WOW.js) coinvolto!
• Animazioni a scorrimento: questi tipi di animazioni vengono visualizzati quando l'utente scorre la visualizzazione dell'elemento su una pagina web. Questo è il tipo di animazione su cui ci concentreremo con WOW.js. Questa animazione può essere creata anche con jQuery.
• Animazioni clic: Con una combinazione di programmazione jQuery e Javascript, puoi creare animazioni sul tuo sito web che vengono eseguite quando l'utente fa clic su un determinato elemento.
• Animazioni “speciali”: queste animazioni più bizzarre possono essere utilizzate su elementi quando vuoi davvero catturare l'attenzione dell'utente all'istante con un'animazione accattivante.

Informazioni su WOW.js

WOW.js è un file Javascript che, se aggiunto al tuo documento HTML, può creare effetti accattivanti e dinamici su un sito. Questo effetto di scorrimento è una delle opzioni più popolari per i web designer, poiché era concesso in licenza come codice open source sotto il MIT. Quando sei su un sito web che implementa WOW.js, gli elementi animati appariranno magicamente mentre scorri il sito. Per un esempio di questo effetto, visitare il sito Web ufficiale per WOW.js. È un ottimo strumento di progettazione da utilizzare con animate.css.

Rispetto ad altre opzioni di animazione con Javascript, WOW.js è estremamente popolare per il suo codice semplice e senza massa. Nota che puoi usare altre librerie di animazione CSS per attivare WOW.js; WOW.js tratta solo animate.css come libreria predefinita. Ciò include librerie come CSShake o DynCSS. WOW.js è gratuito per progetti open source, sebbene richieda l'acquisto di una licenza per qualsiasi progetto commerciale.

Aggiunta di animate.css e WOW.js al tuo progetto

Per iniziare ad animare il tuo sito web, il primo passo è aggiungere animate.css e WOW.js al tuo documento HTML. Ci sono alcuni modi per aggiungere i file al tuo progetto HTML. Puoi scaricare la distribuzione per animate.css e WOW.js da ciascuno dei rispettivi siti ufficiali, o semplicemente collegarti ai file disponibili da CDN. CDN ospita una vasta collezione di librerie per Javascript e CSS.

Uno dei principali vantaggi dell'utilizzo di animate.css per il tuo sito Web è che il codice CSS è contenuto in un solo file, il che semplifica il tuo progetto immensamente. Una volta aggiunto il file CSS al tuo progetto, tutto ciò che devi fare è collegarlo al tuo codice HTML nell'intestazione del documento. In alternativa, puoi semplicemente collegare il file CDN al tuo documento HTML. A seconda che si aggiunga direttamente il file animate.css o si colleghi semplicemente al file CDN, solo l'href varierà leggermente:

Installa animate.css e WOW.js

Fare clic sui collegamenti sottostanti per visualizzare i file animate.css e WOW.js su CDN:

• animate.css Versione non minimizzata: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css
• animate.css versione ridotta: https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css
• Versione non minimizzata di WOW.js: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js
• Versione ridotta di WOW.js: https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js

(Nota: il codice "minificato" si riferisce alla rimozione di spazi bianchi e caratteri più corti per preservare la funzionalità ma creare file di dimensioni più compatte. Ciò renderà il codice più difficile da leggere e modificare per coloro che desiderano personalizzare o apportare modifiche a il codice.)

Utilizzo di npm per installare animate.css e WOW.js

In alternativa, puoi utilizzare un gestore di pacchetti come npm (gestore di pacchetti Javascript) per installare sia animate.css che WOW.js semplicemente digitando alcune parole chiave nella riga di comando. Dalla radice della directory del tuo progetto, esegui il seguente comando dalla riga di comando:

npm installa wowjs

Un vantaggio dell'installazione di WOW.js tramite npm è che installa automaticamente anche animate.css come dipendenza. In questo modo, non devi preoccuparti di seguire le istruzioni per scaricare animate.css con una delle opzioni discusse sopra. Simile all'aggiunta diretta del file o all'utilizzo di CDN, animate.css verrà collegato all'interno del documento (il percorso href sarà diverso a seconda della posizione del file):

Per lo script, puoi aggiungere WOW.js al tuo sito web collegandolo nella parte inferiore del documento HTML, appena sotto il tag di chiusura. Questo deve essere seguito da a tag per attivare WOW.js, come mostrato di seguito:

nuovo WOW (). init ();

Aggiunta di animazioni agli elementi

Una volta aggiunti entrambi i file al progetto, è il momento di selezionare gli elementi HTML che desideri animare durante lo scorrimento. Qualsiasi elemento con una classe .wow rimarrà nascosto finché l'utente non lo raggiunge nella pagina. Puoi applicare questa classe a intestazioni, testo, immagini o anche a una parte più ampia del tuo sito web racchiusa tra a etichetta.

Aggiungi una classe .wow a qualsiasi elemento HTML che desideri animare con WOW.js, come un elemento h1:

Benvenuto nel mio sito!

Animate.css ha 75 diversi stili di animazione tra cui scegliere, tutti dimostrabili sul sito ufficiale (vedi sopra). Dopo aver selezionato un'animazione che desideri utilizzare, aggiungi il suo nome come classe CSS sull'elemento da animare, insieme alla classe "wow". Ecco alcuni esempi di animate.css e WOW.js in azione sul tuo documento HTML:

Benvenuto nel mio sito!

L'elemento h1 ora svanirà a destra una volta che l'utente lo avrà fatto scorrere sulla pagina.

Clicca qui

Il contenuto racchiuso nella il tag ora creerà un effetto pulsante sul sito una volta che l'utente lo ha fatto scorrere sulla pagina.

Alterazioni alle animazioni WOW.js

Ci sono lievi modifiche che possono essere apportate alle animazioni CSS attraverso alcune modifiche in linea sul documento HTML. Puoi aggiungere queste quattro proprietà dopo classe = "wow" e persino combinarli all'interno di qualsiasi tag HTML. Essenzialmente, queste semplici proprietà sono un modo fantastico e senza sforzo per gli utenti di aggiungere versatilità alle animazioni di scorrimento. Di seguito sono riportate le descrizioni delle quattro proprietà che è possibile modificare durante l'animazione di un elemento HTML con WOW.js:

• data-wow-delay="_s": in genere, l'elemento viene visualizzato automaticamente quando l'utente scorre fino alla sua posizione. Con questa proprietà, puoi ritardare l'animazione di _ secondi.
• data-wow-duration="_s": Puoi far durare l'animazione _ secondi, utile per velocizzare o rallentare l'aspetto dell'elemento.
• data-wow-iterazione=“_”: con questa proprietà, puoi ripetere o iterare l'animazione _ volte prima che diventi statica sulla tua pagina.
• data-wow-offset="_": questa proprietà consente all'animazione di iniziare a _ pixel dal bordo del browser prima dell'animazione.

Librerie di animazione alternative a animate.css e WOW.js

Bounce.js

Bounce.js è uno strumento facile da usare per creare fantastiche animazioni CSS3 e Javascript per il tuo sito web in pochi minuti. Gli sviluppatori possono sperimentare un elenco di varie animazioni sullo strumento web Bounce.js per generare fotogrammi chiave statici e persino personalizzare le animazioni direttamente nel browser web. Quando l'animazione soddisfa i tuoi standard, puoi esportare il codice CSS direttamente dal sito e incollarlo nel tuo progetto. Quindi, puoi utilizzare le animazioni che hai creato nel browser Web e applicarle direttamente agli elementi del tuo documento HTML. Lo strumento Web genera anche un URL unico e abbreviato che ti consente di accedere alla tua animazione su un nuovo browser Web nel caso in cui desideri apportare modifiche in qualsiasi momento.

Per saperne di più sulla creazione di animazioni con Javascript e sull'installazione della libreria Bounce.js nel tuo progetto, puoi seguire le istruzioni per l'installazione della libreria Bounce.js sul suo Sito Github.

anime.js

Un'altra popolare libreria di animazioni è Anime.js, che utilizza proprietà CSS, oggetti Javascript, SVG e attributi DOM per creare animazioni impressionanti. La raccolta di Julian Garnier presenta dozzine di animazioni senza soluzione di continuità che puoi aggiungere direttamente al tuo sito. Puoi visualizzare le varie animazioni create con Anime.js nella raccolta Anime.js Codepen. A differenza di WOW.js, questa libreria di animazioni non è necessariamente utilizzata per animare elementi HTML in un sito. Piuttosto, Anime.js viene utilizzato per creare "illustrazioni" animate separate per il tuo sito Web da aggiungere al suo fascino visivo. Alcuni dei miei preferiti includono Garnier's animazione del disegno al tratto e la dimostrazione di animazioni a strati. Per aggiungere la libreria Anime.js al tuo progetto, puoi installarla tramite npm.

Visualizza le istruzioni e la documentazione per l'utilizzo di Anime.js sul Sito Github.

Hover.css

Hover.css produce effetti accattivanti sul tuo sito web semplicemente passando il mouse sugli elementi animati. Puoi utilizzare questa libreria di animazioni per aggiungere più sperma ai normali elementi 2D come pulsanti, loghi o immagini. Sul sito Web Hover.css, puoi sfogliare e testare le varie animazioni come le transizioni di sfondo, 2D, ombra e contorno passando il mouse su ciascun pulsante. Coloro che intendono utilizzare una o poche animazioni Hover.css possono semplicemente scaricare il file e copiare/incollare l'animazione specifica nei propri fogli di stile. Tuttavia, se prevedi di utilizzare molte animazioni Hover.css, puoi essenzialmente seguire la stessa procedura di installazione e collegamento del foglio di stile Hover.css al tuo documento HTML. Avrai accesso a tutti gli effetti Hover.css per animare qualsiasi elemento HTML appropriato sul tuo sito.

Per visualizzare le istruzioni e la documentazione specifiche per l'installazione e l'utilizzo di Hover.css, vai al sito ufficiale Sito Github.

Digitato.js

Per creare l'iconica macchina da scrivere o l'effetto di digitazione, un'opzione popolare per gli sviluppatori web consiste nell'utilizzare Typed.js. Molti siti Web utilizzano questa libreria di animazioni per creare effetti di digitazione di stringhe sulle pagine, inclusa la popolare piattaforma per l'area di lavoro di gruppo, Slack. Installa semplicemente la libreria Hover.css tramite npm o collega il file CDN al tuo documento HTML. Con essenzialmente uno tag, puoi animare un tag di testo HTML con l'effetto macchina da scrivere. Con abbastanza modifiche, puoi creare effetti di digitazione più avanzati sul tuo sito Web per un effetto ancora più sorprendente. Ad esempio, puoi creare l'effetto della pausa del computer durante la digitazione o l'effetto dell'eliminazione delle lettere in una parola.

Il funzionario Sito Github include tutto il codice sorgente e una documentazione dettagliata su come personalizzare l'animazione di digitazione per soddisfare le tue preferenze personali.

CSShake

Come suggerisce il titolo, questa libreria CSS è una raccolta di animazioni che "scuotono" tutti gli elementi HTML sul tuo sito web. Questa bizzarra animazione è perfetta se vuoi attirare l'attenzione su una determinata immagine o sezione del tuo sito web. Inoltre, rende gli elementi del tuo sito Web più interattivi, il che è sempre un vantaggio per lo sviluppo front-end. Puoi sperimentare tu stesso la variazione delle animazioni shake sul sito Web CSShake passando con il mouse su diversi elementi della pagina. Il codice sorgente su CSShake Github include anche una documentazione dettagliata che descrive come creare le tue animazioni shake personalizzate. Dovrai capire e imparare a regolare le proprietà di jQuery leggendo la documentazione.

Quando sei pronto per installare CSShake sul tuo progetto, segui le istruzioni per l'installazione sul Sito Github.

Introduzione alla flexbox CSS e ai selettori CSS avanzati

CSS Flexbox (o Flexible Box Layout) è stata un'aggiunta tardiva alle specifiche CSS3, con l'obiettivo di affrontare molti dei problemi di layout di una pagina Web, in particolare quando si lavora con dispositivi di più dimensioni e design web reattivo. Mentre il più recente CSS grid le proprietà sono in grado di creare layout complessi basati su griglia, flexbox è spesso una scelta migliore per disporre piccoli gruppi di componenti all'interno di un layout più grande, generalmente con molto meno codice rispetto a quando si utilizza grid. Questo post fornirà una breve introduzione all'utilizzo delle proprietà flexbox per problemi di layout comuni.

display: flex

Il primo passo per creare un flexbox è applicare a display: flex proprietà a un elemento padre che fungerà da contenitore per tutti gli elementi flessibili al suo interno.

Mentre la maggior parte dei layout richiederà l'uso di proprietà aggiuntive. È possibile creare un semplice layout a 2 colonne utilizzando solo questa proprietà.

Ad esempio, possiamo prendere un contenitore con 2 div elementi impilati uno sopra l'altro e trasformarlo in un layout a 2 colonne con l'aggiunta del display: flex proprietà:

Codice originale:

HTML

    
    
</div>

 

CSS:

#contenitore {
    altezza: 600px;
    larghezza: 800px;
}
#colonna1 {
    colore di sfondo: blu;
    altezza: 300px;
    larghezza: 400px;
}
#colonna2 {
    colore di sfondo: verde;
    larghezza: 400px;
    altezza: 300px;
}

 

CSS con flexbox:

#contenitore {
    altezza: 600px;
    larghezza: 800px;
    Display: flettere;
}
#colonna1 {
    colore di sfondo: blu;
    altezza: 300px;
    larghezza: 400px;
}
#colonna2 {
    colore di sfondo: verde;
    larghezza: 400px;
    altezza: 300px;
}

 

flex-direction

Possiamo aggiungere un controllo aggiuntivo sul flusso di elementi nel nostro contenitore flessibile tramite il flex-direction proprietà. Per impostazione predefinita, tutti gli elementi all'interno di un contenitore flessibile scorreranno in a row da sinistra a destra, sebbene possiamo anche impostare questa proprietà per avere valori di column, row-reverse or column-reverse.

Regolazione della spaziatura e dell'allineamento con justify-content

Spesso ci sarà più spazio in un contenitore di quello che occupano gli elementi al suo interno, quindi è probabile che tu voglia giustificare la spaziatura degli elementi in un certo modo. Per impostazione predefinita, tutti gli elementi all'interno di un contenitore flessibile verranno allineati all'inizio del contenitore (indicato come flex-start), ma ci sono una varietà di altre opzioni. Notare che la posizione effettiva varierà a seconda dell'impostazione di flex-direction: se la direzione è impostata come row poi flex-start indicherà completamente a sinistra del contenitore, mentre una direzione di column indicherebbe la parte superiore del contenitore per flex-start.

Tornando al nostro esempio di codice originale, aumenteremo il width del nostro contenitore un po' per mostrare meglio il diverso justify-content e socievole.

justify-content: center posizionerà tutti gli elementi direttamente al centro della colonna:

    
    
</div>

 

#contenitore {
    altezza: 600px;
    larghezza: 1000px;
    Display: flettere;
    giustificare-contenuto: centro;
}
#colonna1 {
    colore di sfondo: blu;
    altezza: 300px;
    larghezza: 400px;
}
#colonna2 {
    colore di sfondo: verde;
    larghezza: 400px;
    altezza: 300px;
}

 

justify-content: flex-end è l'opposto di justify-content: flex-start, posizionando gli elementi all'estremità del contenitore:

justify-content: space-between posizionerà tutti gli elementi su ciascuna estremità del contenitore, lasciando tutto lo spazio rimasto al centro del contenitore, nonché attorno a eventuali elementi aggiuntivi all'interno (nei casi di un contenitore con 3 o più elementi):

justify-content: space-around è proprio come spae-between, sebbene ci sia spazio aggiuntivo alle estremità del contenitore:

Esistono tuttavia numerosi altri selettori più avanzati, allo scopo di indirizzare gli elementi con un maggiore livello di specificità. Conoscere il selettore giusto per il lavoro è uno degli aspetti più importanti dell'apprendimento dei CSS. Questo post evidenzierà alcuni dei selettori avanzati più utili per il targeting degli elementi.

Selettori figlio

I selettori figlio vengono utilizzati per indirizzare gli elementi annidati l'uno nell'altro. Esistono due diversi tipi di selettori figlio, discendenti e selettori figlio diretti.

Selettori discendenti

I selettori discendenti vengono utilizzati per scegliere come target un determinato elemento (o gruppo di elementi), indipendentemente da dove sono nidificati nell'elemento padre. Per esempio:

.contenitore p

 

prenderebbe di mira entrambe le istanze del p elemento nel seguente HTML:

Questo è un paragrafo Questo è un altro paragrafo annidato più in basso.

 

Selettori figli diretti

Se vuoi scegliere come target solo gli elementi che si trovano nel livello successivo rispetto all'elemento padre, il selettore figlio diretto è quello da utilizzare.

.contenitore > p

 

sceglierei solo il primo p elemento nel seguente HTML:

Questo è un paragrafo, preso di mira dal selezionatore figlio diretto Questo è un altro paragrafo, non preso di mira dal selettore figlio diretto

 

Selettori fratelli

Selettori generali di fratelli e sorelle

I selettori di fratelli e sorelle generali selezioneranno qualsiasi elemento sullo stesso livello nidificato che appare dopo il primo fratello. Per esempio:

h1 ~ div

 

prenderà di mira i 2 annotati div elementi che compaiono dopo il h1, ma non quello precedente, o qualsiasi altro che potrebbe essere annidato su ulteriori livelli:

Un paragrafo Il titolo Questo div sarà preso di mira Un altro paragrafo Anche questo div sarà preso di mira

 

Selettori fratelli adiacenti

Il selettore Adiacente Sibling viene utilizzato per selezionare gli elementi che appaiono direttamente dopo un dato elemento. Per esempio:

h1 + p

 

mirerà solo a p elemento subito dopo il h1:

... ... Questo paragrafo sarà mirato ... ...

 

Pseudo-classi

Nel precedente post sui selettori CSS, abbiamo toccato le pseudo-classi tramite il :hover selettore. Ci sono molte altre pseudo-classi, tuttavia, come :link, :visited, :active e più.

Per stile e a link che non è stato ancora visitato, usa il :link selettore:

a:link { colore: verde; }

 

Per stile e a collegamento che è stato visitato, utilizzare il :visited selettore:

a:visited { colore: blu; }

 

Le :active selettore può essere utilizzato ogni volta che un utente interagisce con un elemento, ad esempio facendo clic su di esso:

.click-me:active { raggio di confine: 50%; }

 

:focus viene utilizzato ogni volta che un elemento ha "focus", come un elemento di un modulo quando l'utente lo ha inserito tramite un clic del mouse o della tastiera:

a:focus { altezza: 120%; }

Conclusione

Trovi qualcosa di utile trucchi CSS in questo post? Per favore condividi i tuoi commenti qui sotto.