Share
Tack vare flexbox kan vi idag bygga några riktigt attraktiva och moderna layouter. I den här handledningen ska vi titta på ett gränssnitt som nyligen användes för Google National Parks och se hur flexbox kan hjälpa oss att förbättra det.
Som alltid, innan vi går längre, låt oss titta på vad vi ska bygga (du kan behöva kolla in den större versionen eftersom den fulla effekten slår in på visningar som är större än 800px):
Var noga med att sväva över länkarna för att utlösa motsvarande effekter.
Låt oss först undersöka den markering som vi ska använda för att bygga denna layout. Vi definierar a div element med fem länkar i det (du kan använda vilka delar du tycker är lämpliga). Var och en av våra länkar innehåller en div med klassen av täcka över. Nedan ser du skelettet av vår kod:
Med markeringen klar börjar vi definiera några initiala CSS-stilar, specifikt:
Accentsconagua
div som en flexbehållare och ställa in sin höjd lika med visningshöjden med höjd: 100vh.flex: 1. Dessutom har alla våra länkar en bakgrundsbild (kommer från unsplash.com) som täcker visningsportens höjd. Som fallback (om en bild inte är tillgänglig), specificerar vi också en unik bakgrundsfärg för var och en.När vi svävar över en länk blir storleken tre gånger större i förhållande till storleken på de andra länkarna. Vi gör detta genom att ändra värdet av böja egenskapen för mållänken. Lyckligtvis tillhör den här egenskapen de animerade CSS-egenskaperna, så vi kan skapa en smidig övergångseffekt (åtminstone i de senaste webbläsarna).
Här är en del av CSS-koden som visar vad vi har beskrivit ovan:
.flex-wrapper display: flex; höjd: 100vh; .flex-wrapper a position: relative; flex: 1; bakgrundsstorlek: omslag; bakgrundsställning: center; background-repeat: no-repeat; övergång: flex .4s; .flex-wrapper .one background-image: url (IMAGE_PATH); bakgrundsfärg: röd; .flex-wrapper a: svävar flex: 3;
Hittills, om vi förhandsgranskar demo i en webbläsare som stöder flexbox ser vi detta resultat:
Vårt nästa steg är att tilldela några stilar till överlägget. Så här gör vi:
.overlay-inre element) vertikalt och horisontellt.Här är de associerade CSS-stilarna:
.flex-wrapper .overlay display: flex; align-items: center; rättfärdiga innehåll: center; vaddering: 0 10px; position: absolut; topp: 0; höger: 0; botten: 0; vänster: 0; övergång: bakgrundsfärg .4s; .flex-wrapper a: svever. överlay bakgrundsfärg: rgba (0, 0, 0, .5);
Nu är det dags att utforma de inre delarna av vårt överdrag. Som standard är dessa dolda och ska bara visas när vi svävar över motsvarande förlagslänk. Men inte omedelbart kommer vi att avslöja dem efter en liten fördröjning. Denna försening är viktig; Om vi inte definierar det specifikt kommer övergångseffekten att se lite ful ut. Ta bort det och testa demoen för att förstå vad jag menar.
Så bara för att samla, först blir länken större, så blir överlagringselementen synliga. Vi använder också translate3d () för att skapa några diabilder i effekter. Sist men inte minst använder vi transform-stil: bevara-3d hacka (eller liknande) för att förhindra eventuella flickrande effekter över olika webbläsare.
Och här är de relaterade CSS-stilarna:
.flex-wrapper .overlay-inner * synlighet: dold; opacitet: 0; transform-stil: bevara-3d; .flex-wrapper .överlay h2 transform: translate3d (0, -60px, 0); .flex-wrapper .overlay p transform: translate3d (0, 60px, 0); .flex-wrapper a: sväva .överlay-inner * opacitet: 1; synlighet: synlig transformera: ingen; övergång: alla .3s .3s;
Låt oss se vad som gavs oss.
Sidan ser bra ut på stora skärmar, men kanske på små eller till och med på median skärmar måste vi göra några justeringar. Till exempel, här är några saker vi kan göra:
flex-riktning: kolumn till det. På så sätt kommer flex-objekten att strömma från topp till botten.Vårt skrivbords första mediafråga ser ut som följer (jag har bara använt 800px eftersom det passar de inbäddade demonerna i den här posten - du kan välja vad du tycker är bäst):
@media-skärm och (maxbredd: 800px) .flex-wrapper flex-direction: column; .flex-wrapper a: svävar flex: 1; .flex-wrapper a: svever. överlay bakgrundsfärg: transparent; .flex-wrapper .overlay h2, .flex-wrapper .overlay p opacitet: 1; synlighet: synlig transformera: ingen;
Här är det slutliga utseendet på vår navigering:
Demon fungerar i alla nya webbläsare som stöder flexbox.
I vissa webbläsare kanske du märker att animationen av böja egendom är inte så smidigt som det borde vara, eller kanske inte fungerar alls. Till exempel animerar IE11 inte den här egenskapen, medan Edge gör det. Detta är rimligt nog, med tanke på att flexbox är ett nytt layoutläge som fortfarande har dragkraft.
I denna handledning förbättrade vi vår flexbox kunskap genom att lära oss hur man bygger en elegant navigationslayout. Förhoppningsvis njöt du av det vi har byggt här och har inspirerat till dina nästa projekt!
Om du bygger en liknande layout, glöm inte att visa oss hur du använder (ren CSS eller JavaScript-baserad lösning).
Innan du stänger vill jag dela med dig några webbplatser som använder en liknande layout till vad vi just har skapat:
