Accentsconagua
Share
I denna handledning kommer vi att bygga en säsongskalender med hjälp av CSS Grid, SVG, och en handfull festlig jubel! Låt oss börja med att titta på vad vi ska arbeta mot - klicka på dagarna för att se vad som står nedan:
Du behöver inte faktiskt mycket för denna handledning, bara en kodredigerare (luta på CodePen för att göra saker lättare) och lite grundläggande HTML- och CSS-kunskaper. Du kommer behöver lite festliga bilder - jag har tagit illustrationer av den mycket begåvade masastaroten från Envato Elements (de är vektor och helt perfekt för detta):
Lyckliga barn firar jul
Grupp av barn och julgranFör vår Advent-kalender kommer vi att använda 25 rutnät. en för varje dag fram till jul och en annan för att hålla en titel grafik. Det kommer att se ut så här på små skärmar:
Och det här på större skärmar:
Den turkosa rutnätet innehåller vår titel grafik.
För att sparka bort saker behöver vi 25 saker i en behållare, så låt oss sätta lite HTML ihop:
Tips: Med tanke på den här upprepade naturen kanske du föredrar att använda ett templerande språk som HAML. HAML låter dig slinga över 24 objekt för att rädda dig att skriva ut var och en. Följande lilla utdrag kompilerar till exakt vad du ser ovan:
% section.grid-1% div.title - (1 ... 24) .each do | i | % div : class => "dag - # i"
När vi hyser ännu fler element inom dessa divs kommer du att uppskatta tiden HAML sparar dig!
Låt oss nu lägga till några grundläggande stilar för att etablera vårt nät. Vi börjar med att tilldela display: rutnät; till vårt behållarelement. Efter några dimensioner definierar vi sedan rutnätet.
/ * Mobilt första rutnätlayout * / .grid-1 display: rutnät; bredd: 96%; maxbredd: 900px; marginal: 2% auto; rutmall-kolumner: repetera (3, 1fr); rutnät-rader: auto; gallergap: 25px;
Vi har gått "mobil först", så du får se att vi definierar bara tre kolumner för att börja med; Vi använder en mediafråga på ett ögonblick för att tillåta större skärmar.
rutmall-kolumner: repetera (3, 1fr); ger oss tre kolumner, var och en med samma bredd (1fr enhet)rutnät-rader: auto; är faktiskt standardvärdet, men det anges att raderna inte har någon specifik höjd som tillskrivs dem-vi kan lägga till så många som vi gillar och de kommer att växa med innehållet.gallergap: 25px; definierar våra takrännor.Det är verkligen allt vi behöver, Grid kan hantera saker härifrån om vi lämnar det, men vi vill vara mer specifika om var vi placerar varje nätobjekt. Därför använder vi gridområden.
Vi kan tilldela ett namn till varje område i det nät som vi definierat, och vi kan också skriva det på ett riktigt visuellt sätt:
galler-mall-områden: "d t d t d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d" d19 d24 d21 ";
Här namnger vi det första området, som sträcker sig över tre kolumner i första raden t (där vi ska placera titeln). Det här kanske inte är det mest användbara namnet, men det kommer att göra jobbet för nu. Var och en av de andra områdena har ett namn i enlighet med dagnumren, och som du kan se kan vi placera dem vart vi vill. Möjligheten att lägga ut saker "slumpmässigt" som denna är perfekt för en adventskalender.
Med en mediasökning kan vi (riktigt enkelt) ändra layouten för större skärmar.
/ * Mediaquery * / @media only screen och (minbredd: 500px) .grid-1 rutnätmall-kolumner: upprepa (6, 1fr); galler-mallområden: "d t d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d d";
Med denna mediefråga anger vi att för visningar som är större än 500px (godtycklig figur) ska vi byta rutnätet så att det har sex kolumner: rutnätmall-kolumner: upprepa (6, 1fr);.
Och vi kan helt omdefiniera arrangemanget av objekten, placera dagarna vart vi känner för det. Du kommer märka att titelblocket nu tar upp tre kolumner och tre rader uppe till vänster och d24 tar upp ett område på 2 × 2, för att ge den större betydelse. Detta kommer att bli klart när vi tilldelar gridpunkterna till gridområdena i nästa steg.
För närvarande kan vi faktiskt inte se något av vad vi har gjort, så låt oss lägga till några preliminära stilar i rutnätet för att göra sakerna synliga.
sektion div bakgrund: # 2e313d; vaddering: 40px;
Ta en titt:
Behöver du en primer på rutnät? Läs mer om hela grejen i den här nybörjarens handledning:
Vi behöver nu tilldela våra rutnät till de områden vi har angivit. Vi gör detta enligt följande:
/ * enskilda objekt * / .title rutnätområde: t; .dag-1 rutnätområde: d1; .dag-2 rutnätområde: d2; .dag-3 rutnätområde: d3; ...
Du kan se vårt div.title har tilldelats gridområdet t, och varje dag har tilldelats ett motsvarande område. Det finns inget att säga att du inte kan tilldela .dag-3 till rutnätområde: d16; Naturligtvis väljer vi bara att organisera saker på detta sätt. Hur ser det ut?
Det är den grundläggande strukturen alla sorterade, nu behöver vi göra våra CSS-dörrar. Vi ska placera två div dividerad i varje galler objekt - en för dörrens framsida, en för baksidan - båda inslagna i en annan div, och vi ska använda en kryssruta hack för att vända hela saken runt när det är klickade.
Vi börjar med att lägga till en etikett, kryssruta och divs till varje nätobjekt:
Återigen måste du göra det för alla 24 rutnät, vilket är en skrymmande bit av repetitiv markering 245 linjer lång, så du kan hitta HAML till hjälp. Så här skulle det se ut:
% div : class => "dag - # i"% label% input : type => "kryssrutan" .door .front # i .back
Med lite justerad vaddering så här ser alla dessa kryssrutor ut nu:
Förbered dig; vad som kommer är förmodligen den mest komplexa delen av hela byggnaden. Det är en stor bit och väldigt lite fungerar utan att hela saken är närvarande, så bära med mig. Vi ska göra några övergångar med 3D Transforms.
För det första döljer vi kryssrutorna, då anger vi att vi vill ha en vis nivå av perspektiv som tillämpas på våra etiketter (perspektiv: 1000px; hanterar det). transform-stil: bevara-3d; säger att barn på etiketten kommer att visas i ett 3D-utrymme istället för längs ett planplan. Vi använder sedan några Flexbox-stilar för att säkerställa att etiketten fyller hela området tillgängligt för det.
Några stilar på .dörr element (som innehåller fram- och baksidor) ställer sedan övergångstiden och städer upp saker:
/ * dörrstilar * / .grid-1 ingång display: none; etikett perspektiv: 1000px; transform-stil: bevara-3d; markör: pekare; display: flex; minhöjd: 100%; bredd: 100%; höjd: 120px; .door bredd: 100%; transform-stil: bevara-3d; övergång: alla 300ms; gräns: 2px streckad transparent;
Okej, nu att koncentrera sig på framsidan och baksidan av vår dörr.
.dörr div position: absolute; höjd: 100%; bredd: 100%; backface-visibility: hidden; display: flex; align-items: center; rättfärdiga innehåll: center; .door .back background-color: # 2e313d; transformera: rotera (180deg);
De .dörr div väljaren pekar på båda .främre och den .tillbaka divs. Vi använder den för att göra varje 100% bredd och höjd på .dörr behållare, och absolut placerad till vänster. Flexboxreglerna säkerställer att innehållet inom (numret) är centralt justerat och backface-visibility: hidden; regeln säkerställer att ingen av ansikten kan ses när deras baksida står inför oss. Det är viktigt, då vi fokuserar på .tillbaka och ställ det för att bläddra med transformera: rotera (180deg);.
Allt detta har lett till vad som faktiskt är en ganska cool effekt. Vi ska använda kryssrutan för att övergå i ansikten. När vi klickar på etiketten (som fyller hela rutnätet) kontrollerar och avmarkerar vi kryssrutan, även om det inte visas. Beroende på det tillståndet, ändrar vi vilken väg .dörr är vänd.
Etikett: svävar. Door border-color: # 385052; : kontrollerad + .door transform: rotateY (180deg);
Den första regeln ger oss ett hover-tillstånd. Den andra regeln använder en närliggande väljare, så när a .dörr elementet föregås genast av a :kontrollerade element vi roterar det 180 grader på Y-axeln (vi vänder det över). Allt detta ger oss vår grundläggande dörrfunktionalitet!
Låt oss få saker att se bra ut. Den första visuella vi ska gå in i är vår titel grafik. Med hjälp av de lyckliga barnen som firar julillustration tog jag titeln, ändrade detaljerna och sparade en SVG-fil.
Tips: För detaljerade vektorer som dessa, gå i Illustrator till Objekt> Path> Förenkla ... och du kan minska komplexiteten. Genom att trimma antalet kurvor och punkter kan du sänka filstorleken avsevärt utan att förlora för mycket av den totala effekten.
Det finns några sätt att lägga till den här bilden på sidan, men jag har just lagt en img tagga i vår markering:
Vissa stilar ger vår bildfluiditet och anpassar den centralt inom nätområdet:
.titel display: flex; align-items: center; rättfärdiga innehåll: center; .title img width: 90%; höjd: auto;
För att förbättra den tomma bakgrunden lägger vi till en annan SVG (snöfallet och molnen) till kroppen via CSS:
kropp bakgrund: url (snow-bg.svg) no-repeat top center # 82d8cb; bakgrundsstorlek: omslag;
Var och en av våra 24 dörrar behöver också ha en bild som gömmer sig bakom dem. Återigen kan vi göra det på några olika sätt, men i det här fallet sparar vi en massa SVG-filer och lägger till dem som bakgrund via CSS. För varje dörr, efter att vi definierat dess rutnätområde, har vi en regel för .tillbaka ansikte:
.dag-6 rutnätområde: d6; .day-6 .back background: url (snowflake.svg);
Det här är vad som ger oss:
Ganska bra! Nu behöver vi bara städa dessa bilder upp med några allmänna regler.
Först måste dessa bakgrundsbilder visas en gång, så vi lägger till en no-repeat. De måste också vara centralt och skalas ordentligt.
.dörr. back background-size: contain; bakgrundsställning: center center; background-repeat: no-repeat; bakgrundsfärg: # 2e313d; transformera: rotera (180deg);
Några border-radius lagt till .dörr och .dörr div ger oss en mer vänlig estetik. Och slutligen länkar vi till tecknet Kalam på Google-teckensnitt för att polera den senaste typografiska detaljerna:
stilar:
/ * läggs till .door div * / font-family: 'Kalam', cursive; färg: # 385052; typsnittstorlek: 2em; font-weight: bold; textskugga: 1px 1px 0 rgba (255, 255, 255, 0.2);
Det handlar om att bryta upp saker! Det här är förstås bara för nyhetsvärde och övning av CSS Grid (statusen för varje dörr sparas inte för nästa webbläsarsession eller något) men vi har kommit långt med bara några uppslag och några stilar.
Stöd är en sista punkt att nämna; Det finns några aspekter av denna handledning som inte åtnjuter fullständigt webbläsarstöd ännu. För några tips om hur man hanterar detta, se resurserna nedan.
Jag hoppas att du gillar handledningen och tycker om att räkna ner dagarna!
