Share
Grazie a flexbox, oggigiorno possiamo creare alcuni layout davvero interessanti e moderni con relativa facilità. In questo tutorial vedremo un'interfaccia utilizzata di recente per i parchi nazionali di Google e vedremo come Flexbox può aiutarci a migliorarci.
Come sempre, prima di andare oltre, guardiamo a ciò che costruiremo (potrebbe essere necessario controllare la versione più grande mentre l'effetto completo si apre su finestre più larghe di 800px):
Assicurati di passare con il mouse sui collegamenti per attivare gli effetti corrispondenti.
Per prima cosa, esaminiamo il markup che useremo per costruire questo layout. Definiamo a div elemento con cinque collegamenti al suo interno (puoi utilizzare qualsiasi elemento tu ritenga appropriato). Ciascuno dei nostri collegamenti contiene a div con la classe di copertura. Qui sotto puoi vedere lo scheletro del nostro codice:
Con la marcatura pronta, iniziamo a definire alcuni stili CSS iniziali, in particolare:
Accentsconagua
div come un contenitore flessibile e impostare la sua altezza uguale all'altezza del viewport con altezza: 100 vh.flex: 1. Inoltre, tutti i nostri collegamenti avranno un'immagine di sfondo (proveniente da unsplash.com) che copre l'altezza del viewport. Come riserva (nel caso in cui un'immagine non sia disponibile), specifichiamo anche un colore di sfondo unico per ognuno.Quando passiamo il mouse su un link, le sue dimensioni diventano tre volte maggiori rispetto alle dimensioni degli altri link. Lo facciamo cambiando il valore del flettere proprietà del link di destinazione. Fortunatamente questa proprietà appartiene alle proprietà CSS animate, quindi siamo in grado di generare un effetto di transizione uniforme (almeno nei browser più recenti).
Ecco una parte del codice CSS che dimostra ciò che abbiamo descritto sopra:
.flex-wrapper display: flex; altezza: 100 vh; .flex-wrapper a position: relativo; flex: 1; dimensione di sfondo: copertina; posizione di sfondo: centro; background-repeat: no-repeat; transizione: flex .4s; .flex-wrapper .one background-image: url (IMAGE_PATH); colore di sfondo: rosso; .flex-wrapper a: hover flex: 3;
Finora, se visualizziamo l'anteprima della demo in un browser che supporta Flexbox, vedremo questo risultato:
Il nostro prossimo passo è assegnare alcuni stili alla sovrapposizione. Ecco cosa faremo:
.overlay-interno elemento) verticalmente e orizzontalmente.Ecco gli stili CSS associati:
.flex-wrapper .overlay display: flex; align-items: center; justify-content: center; padding: 0 10px; posizione: assoluta; inizio: 0; a destra: 0; fondo: 0; a sinistra: 0; transizione: background-color .4s; .flex-wrapper a: hover .overlay background-color: rgba (0, 0, 0, .5);
Ora è il momento di modellare le parti interne del nostro overlay. Di default questi sono nascosti e dovrebbero apparire solo quando passiamo il mouse sopra il link genitore corrispondente. Ma non immediatamente, li riveleremo dopo un piccolo ritardo. Questo ritardo è importante; se non lo definiamo in modo specifico, l'effetto di transizione apparirà un po 'brutto. Rimuovilo e prova la demo per capire cosa intendo.
Quindi, per ricapitolare, prima il collegamento diventa più grande, quindi gli elementi di sovrapposizione diventano visibili. Inoltre, usiamo il translate3d () per creare qualche diapositiva in effetti. Ultimo ma non meno importante, usiamo il stile di trasformazione: preserve-3d hack (o uno simile) per prevenire possibili effetti di sfarfallio su diversi browser.
E qui ci sono gli stili CSS correlati:
.flex-wrapper .overlay-inner * visibility: hidden; opacità: 0; transform-style: preserve-3d; .flex-wrapper .overlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: translate3d (0, 60px, 0); .flex-wrapper a: hover .overlay-inner * opacity: 1; visibilità: visibile; trasformare: nessuno; transizione: tutti .3s .3s;
Vediamo cosa ci ha dato.
La pagina ha un bell'aspetto su schermi di grandi dimensioni, ma forse su schermi piccoli o anche su schermi medi dovremo fare alcuni aggiustamenti. Ad esempio, ecco alcune cose che possiamo fare:
direzione della flessione: colonna ad esso. In tal modo gli elementi flessibili scorreranno dall'alto verso il basso.La nostra media query desktop-first appare come segue (ho usato solo 800px perché ciò si adatta alle demo incorporate in questo post: puoi scegliere quello che ritieni migliore):
@media screen e (max-width: 800px) .flex-wrapper flex-direction: column; .flex-wrapper a: hover flex: 1; .flex-wrapper a: hover .overlay background-color: transparent; .flex-wrapper .overlay h2, .flex-wrapper .overlay p opacity: 1; visibilità: visibile; trasformare: nessuno;
Ecco l'aspetto finale della nostra navigazione:
La demo funziona in tutti i browser recenti che supportano il flexbox.
In alcuni browser potresti notare che l'animazione di flettere la proprietà non è così liscia come dovrebbe essere, o forse non funziona affatto. Ad esempio, IE11 non anima questa proprietà, mentre Edge lo fa. Questo è abbastanza ragionevole, considerando il fatto che Flexbox è una nuova modalità di layout che sta ancora guadagnando trazione.
In questo tutorial, abbiamo migliorato le nostre conoscenze sulla tecnologia Flexbox apprendendo come creare un elegante layout di navigazione. Spero che ti sia piaciuto ciò che abbiamo costruito qui e che tu abbia tratto ispirazione per i tuoi prossimi progetti!
Se crei un layout simile, non dimenticare di mostrarci l'approccio (pura soluzione CSS o basata su JavaScript) che hai utilizzato.
Prima di chiudere, vorrei condividere con voi alcuni siti che utilizzano un layout simile a quello che abbiamo appena creato:
