Share
Takket være flexbox, kan vi i dag bygge noen virkelig attraktive og moderne oppsett med relativ letthet. I denne opplæringen skal vi se på et grensesnitt som nylig ble brukt til Google National Parks, og se hvordan flexbox kan hjelpe oss med å forbedre det.
Som alltid, før vi går videre, la oss se på hva vi skal bygge (det kan hende du må sjekke ut den større versjonen, da den fulle effekten kommer inn på visningsportene bredere enn 800px):
Pass på å sveve over koblingene for å utløse de tilsvarende effektene.
Først må vi undersøke merkingen vi skal bruke til å bygge denne oppsettet. Vi definerer a div element med fem koblinger i det (du kan bruke hvilke elementer du føler er passende). Hver av våre lenker inneholder en div med klassen av overlegg. Nedenfor kan du se skjelettet av koden vår:
Med markeringen klar, begynner vi å definere noen innledende CSS-stiler, spesielt:
Accentsconagua
div som en flexbeholder og sett høyden lik visningsportens høyde med høyde: 100vh.flex: 1. I tillegg vil alle våre koblinger ha et bakgrunnsbilde (hentet fra unsplash.com) som dekker visningsportens høyde. Som tilbakebetaling (i tilfelle et bilde ikke er tilgjengelig), spesifiserer vi også en unik bakgrunnsfarge for hver enkelt.Når vi svinger over en lenke, blir størrelsen tre ganger større i forhold til størrelsen på de andre koblingene. Vi gjør dette ved å endre verdien av flex egenskapen til mållinken. Heldigvis tilhører denne eiendommen de animerte CSS-egenskapene, så vi kan generere en jevn overgangseffekt (i alle fall i de nyeste nettleserne).
Her er en del av CSS-koden som viser hva vi har beskrevet ovenfor:
.flex-wrapper display: flex; høyde: 100vh; .flex-wrapper a posisjon: relative; flex: 1; bakgrunnsstørrelse: deksel; bakgrunnsposisjon: senter; bakgrunn-gjentak: ikke-gjenta; overgang: flex .4s; .flex-wrapper .one bakgrunnsbilde: url (IMAGE_PATH); bakgrunnsfarge: rød; .flex-wrapper a: svever flex: 3;
Så langt, hvis vi forhåndsvise demoen i en nettleser som støtter flexbox, ser vi dette resultatet:
Vårt neste skritt er å tildele noen få stiler til overlegget. Her er hva vi skal gjøre:
.overlay-indre element) vertikalt og horisontalt.Her er de tilknyttede CSS-stilene:
.flex-wrapper .overlay display: flex; justeringselementer: center; begrunn-innhold: center; polstring: 0 10px; posisjon: absolutt; topp: 0; høyre: 0; bunn: 0; venstre: 0; overgang: bakgrunnsfarge .4s; .flex-wrapper a: svever .overlay bakgrunnsfarge: rgba (0, 0, 0, .5);
Nå er det på tide å style de indre delene av overlegget vårt. Som standard er disse skjult og skal bare vises når vi svinger over den tilhørende overordnede lenken. Men ikke umiddelbart, vil vi avsløre dem etter en liten forsinkelse. Denne forsinkelsen er viktig; hvis vi ikke definerer det spesifikt, vil overgangseffekten se litt stygg ut. Fjern den og test demoen for å forstå hva jeg mener.
Så bare for å samle, først blir lenken større, så blir overleggselementene synlige. Også, bruker vi translate3d () å skape noe lysbilde i effekter. Sist men ikke minst bruker vi transform-stil: preserve-3d hack (eller lignende) for å forhindre mulige flimrende effekter over forskjellige nettlesere.
Og her er de relaterte CSS-stilene:
.flex-wrapper .overlay-inner * synlighet: skjult; opasitet: 0; transform-stil: preserve-3d; .flex-wrapper .overlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: translate3d (0, 60px, 0); .flex-wrapper a: svever .overlay-inner * opacity: 1; synlighet: synlig; transformere: ingen; overgang: alle .3s .3s;
La oss se hva som er gitt oss.
Siden ser bra ut på store skjermer, men kanskje på små eller til og med på mellomstore skjermer må vi gjøre noen tilpasninger. For eksempel, her er noen ting vi kan gjøre:
flex-retning: kolonne til det. På denne måten vil flex-elementene flyte fra topp til bunn.Vårt første første spørreskjema på skrivebordet ser ut som følger (jeg har brukt 800px bare fordi det passer til de innebygde demoene i dette innlegget - du kan velge det du føler er best):
@media skjerm og (maks bredde: 800px) .flex-wrapper flex-retning: kolonne; .flex-wrapper a: svever flex: 1; .flex-wrapper a: svever .overlay bakgrunnsfarge: gjennomsiktig; .flex-wrapper .overlay h2, .flex-wrapper .overlay p opacity: 1; synlighet: synlig; transformere: ingen;
Her er det siste utseendet på navigasjonen vår:
Demoen fungerer i alle nyere nettlesere som støtter flexbox.
I noen nettlesere kan du merke at animasjonen av flex Eiendommen er ikke så glatt som den burde være, eller kanskje ikke fungerer i det hele tatt. For eksempel, IE11 ikke animerer denne egenskapen, mens Edge gjør. Dette er rimelig nok, med tanke på at flexbox er en ny layoutmodus som fremdeles er i ferd med å få trekkraft.
I denne opplæringen forbedret vi vår flexbox kunnskap ved å lære å bygge en stilig navigasjonslayout. Forhåpentligvis likte du det vi har bygget her og har tatt litt inspirasjon til dine neste prosjekter!
Hvis du bygger en lignende layout, ikke glem å vise oss tilnærmingen (ren CSS eller JavaScript-basert løsning) du brukte.
Før du lukker, vil jeg gjerne dele med deg noen få nettsteder som bruker en lignende layout til det vi nettopp har opprettet:
