Accentsconagua
Share
I denne opplæringen skal vi bygge en sesongkalenderskalender ved hjelp av CSS Grid, SVG, og en håndfull festlig jubel! La oss begynne med å se hva vi skal jobbe mot - klikk på dagene for å se hva som er under:
Du trenger ikke faktisk mye for denne opplæringen, bare en kodeditor (lene på CodePen for å gjøre tingene enklere) og noen grunnleggende HTML- og CSS-kunnskaper. Du vil trenger noen festlige visualer skjønt-Jeg har tatt illustrasjoner av den meget talentfulle masastaruseren fra Envato Elements (de er vektor og helt perfekt for dette):
Glade barn feirer jul
Gruppe av barn og juletreFor vår Adventskalender skal vi bruke 25 gitterelementer; en for hver dag som fører opp til jul og en annen for å holde en tittel grafikk. Det ser slik ut på små skjermer:
Og dette på større skjermer:
Det turkise gridelementet vil holde tittelgrafen vår.
For å sparke ting trenger vi 25 elementer i en beholder, så la oss legge sammen HTML:
Tips: Med tanke på den repeterende karakteren til denne markeringen, foretrekker du kanskje å bruke et templerende språk som HAML. HAML lar deg løse over 24 elementer for å spare deg for å skrive ut hver enkelt. Følgende liten utdrag samler inn akkurat det du ser over:
% section.grid-1% div.title - (1 ... 24) .each do | i | % div : class => "dag - # i"
Når vi hekker enda flere elementer i disse divisjonene, vil du sette pris på tiden HAML sparer deg for!
La oss nå legge til noen grunnleggende stiler for å etablere nettverket vårt. Vi begynner med å tildele skjerm: grid; til vårt containerelement. Deretter definerer vi etter noen dimensjoner rutenettene.
/ * mobil første grid layout * / .grid-1 display: grid; bredde: 96%; maksimal bredde: 900px; margin: 2% auto; Rutenett-mal-kolonner: Gjenta (3, 1fr); rutenett-mal-rader: auto; grid-gap: 25px;
Vi har gått "mobile først", så du får se at vi definerer bare tre kolonner til å begynne med; Vi bruker et medieforespørsel om et øyeblikk for å tillate større skjermer.
Rutenett-mal-kolonner: Gjenta (3, 1fr); gir oss tre kolonner, hver med like bredde (1fr enhet)rutenett-mal-rader: auto; er faktisk standardverdien, men det står at radene ikke har noen bestemt høyde tilskrevet dem - vi kan legge til så mange som vi liker, og de vil vokse med innholdet.grid-gap: 25px; definerer våre takrenner.Det er egentlig alt vi trenger, Grid kan håndtere ting herfra hvis vi forlater det, men vi vil være mer spesifikt om hvor vi plasserer hvert gitterelement. Derfor bruker vi gridområder.
Vi kan tildele et navn til hvert område av nettverket vi definerte, og vi kan også skrive det på en veldig visuell måte:
grid-template-områder: "t t t" "D23 D20 D12" "d2 d14 D4" "d5 D22 D16" "d1 d7 d9" "d10 d11 d18" "D13 d3 D15" "d6 d17 d8" "d19 d24 D21";
Her navngir vi det første området, som strekker seg over tre kolonner på første rad t (hvor vi skal plassere tittelen). Dette er kanskje ikke det mest nyttige navnet, men det vil gjøre jobben for nå. Hvert av de andre områdene er gitt et navn i henhold til dagnumrene, og som du kan se, kan vi sette dem der du vil. Evnen til å legge ting ut "tilfeldig" som dette er perfekt for en adventskalender.
Med tillegg av en medieforespørsel kan vi (veldig enkelt) endre oppsettet for større skjermer.
/ * Media ordet * / @media eneste skjerm og (min-bredde: 500 piksler) .grid-1 gitter-template-kolonner: repeat (6, 1fr); grid-template-områder: "t t t d2 d7 d8" "t t t d4 d11 d12" "t t t d19 d9 D13" "d6 d1 d24 d24 D21 D20" "d17 d18 d24 d24 d5 d22" "d3 D23 d16 d14 d10 d15";
Med denne medieforespørselen sier vi at for visningsporter som er større enn 500 px (vilkårlig figur), vil vi endre gridet slik at det har seks kolonner: rutenettmall-kolonner: gjenta (6, 1fr);.
Og vi kan helt omdefinere arrangementet av elementene, plassere dagene hvor vi føler det. Du vil merke at tittelen blokken nå tar opp tre kolonner og tre rader til venstre, og D24 tar opp et område på 2 × 2, for å gi den mer betydning. Dette blir tydelig når vi tilordner rutenettet til rutenettene i neste trinn.
For nå kan vi faktisk ikke se noe av det vi har gjort, så la oss legge til noen foreløpige stiler til rutenettene for å gjøre ting synlige.
divisjon div bakgrunn: # 2e313d; polstring: 40px;
Ta en titt:
Trenger du en primer på rutenett? Lær mer om hele greia i denne nybegynnerens opplæring:
Vi må nå tilordne rutenettet til områdene vi har satt ut. Vi gjør dette på følgende måte:
/ * enkelte elementer * / .title grid-area: t; .dag-1 grid-område: d1; .dag-2 grid-område: d2; .dag-3 grid-område: d3; ...
Du kan se vår div.title har blitt tilordnet gridareal t, og hver dag har blitt tildelt et tilsvarende område. Det er ingenting å si at du ikke kan tildele .dag-3 til rutenett: d16; Selvfølgelig velger vi bare å organisere ting på denne måten. Hvordan ser det ut??
Det er den grunnleggende strukturen som er sortert, nå må vi lage våre CSS dører. Vi kommer til å sette to divs innenfor hver grid punkt-en for foran døren, en annen for back-både innpakket i en annen div, og vi kommer til å bruke en avkrysnings hack for å snu det hele rundt når det er klikket.
Vi begynner med å legge til en etikett, avkrysningsboks og divene til hvert rutenett:
Igjen må du gjøre dette for alle 24 gridelementer, som er en stor del av repeterende markup 245 linjer lang, slik at du kanskje finner HAML nyttig. Slik ser det ut:
% div : class => "dag - # i"% label% input : type => "avkrysningsruten" .door .front # i .back
Med litt justert polstring, så er det slik alle disse boksene ser ut som nå:
Gjør deg klar; Det som kommer er uten tvil den mest komplekse delen av hele denne bygningen. Det er en stor klump og veldig lite arbeid uten at det hele er tilstede, så vær med meg. Vi skal gjøre noe skiftende med 3D Transforms.
For det første skjuler vi avmerkingsboksene, så sier vi at vi ønsker et visst perspektiv på våre etiketter (perspektiv: 1000px; håndterer det). transform-stil: preserve-3d; sier at barn av etiketten vil bli vist i en 3D-plass i stedet for langs et flatt plan. Vi bruker så noen Flexbox-stiler for å sikre at etiketten fyller hele området tilgjengelig for det.
Noen stiler på .dør element (som inneholder forsiden og baksiden), sett deretter overgangstimingen og ryddet opp ting videre:
/ * dørstiler * / .grid-1 inngang display: none; etikett perspektiv: 1000px; transform-stil: preserve-3d; markør: pointer; display: flex; Min høyde: 100%; bredde: 100%; høyde: 120px; .door bredde: 100%; transform-stil: preserve-3d; Overgang: alle 300ms; grense: 2px strekket gjennomsiktig;
Ok, nå å konsentrere seg om fronten og baksiden av døren vår.
.dør div posisjon: absolutt; høyde: 100%; bredde: 100%; backface-synlighet: skjult; display: flex; justeringselementer: center; begrunn-innhold: center; .door .back background-color: # 2e313d; transformer: roterY (180deg);
De .dør div velgeren peker til begge .front og .tilbake divs. Vi bruker den til å gjøre hverandre 100% bredden og høyden på .dør container, og helt plassert øverst til venstre. Flexboxreglene sørger for at innholdet innenfor (nummeret) er sentralt justert og backface-synlighet: skjult; regelen sikrer at ingen av ansiktene kan ses når baksiden vender mot oss. Det er viktig, da vi fokuserer på .tilbake og sett den til å hoppe over med transformer: roterY (180deg);.
Alt dette har ført til hva som egentlig er en ganske kul effekt. Vi skal bruke den merkede tilstanden i avmerkingsboksen for å overføre ansiktene. Når vi klikker på etiketten (som fyller hele gridområdet) sjekker og fjerner vi avmerkingsboksen, selv om den ikke vises. Avhengig av hvilken tilstand, endrer vi hvilken vei .dør møter.
etikett: svever .door border-color: # 385052; : merket + .door transform: rotateY (180deg);
Den første regelen gir oss en sveverstat. Den andre regelen bruker en tilgrensende velger, så når a .dør elementet er umiddelbart foran et a :sjekket element vi roterer det 180 grader på y-aksen (vi slår den over). Alt dette gir oss vår grunnleggende dørfunksjonalitet!
La oss få ting til å se pen ut. Den første visuelle vi kommer til å spille inn er vår tittel grafikk. Ved hjelp av de lykkelige barna feirer julillustrasjonen tok jeg tittelen, endret detaljene og lagret en SVG-fil.
Tips: For detaljerte vektorer som disse, gå i Illustrator til Objekt> Sti> Forenkle ... og du kan redusere kompleksiteten. Ved å trimme antall kurver og poeng kan du redusere filstørrelsen betydelig uten å miste for mye av den samlede effekten.
Det er noen måter vi kan legge til dette bildet på siden, men jeg har nettopp plassert en img merk i vårt oppslag:
Noen stilarter gir vår bildefluiditet og justerer den sentralt i rutenettet:
.tittel display: flex; justeringselementer: center; begrunn-innhold: center; .title img width: 90%; høyde: auto;
For å forbedre den tomme bakgrunnen legger vi til en annen SVG (snøfallet og skyene) til kroppen via CSS:
kropp bakgrunn: url (snow-bg.svg) no-repeat toppsenter # 82d8cb; bakgrunnsstørrelse: deksel;
Hver av våre 24 dører må også ha et bilde som ligger bak dem. Igjen kan vi gjøre dette på noen forskjellige måter, men i dette tilfellet lagrer vi en haug med SVG-filer og legger dem til som bakgrunn via CSS. For hver dør, etter at vi har definert gridområdet, har vi en regel for .tilbake ansikt:
.dag-6 grid-område: d6; .day-6 .back bakgrunn: url (snowflake.svg);
Dette er det som gir oss:
Ganske bra! Nå må vi bare rydde disse bildene opp med noen generelle regler.
Først opp, må disse bakgrunnsbildeene vises bare én gang, så vi legger til en no-repeat. De må også være sentrale og skaleres riktig.
.dør .back bakgrunnsstørrelse: inneholde; bakgrunnsposisjon: senter senter; bakgrunn-gjentak: ikke-gjenta; bakgrunnsfarge: # 2e313d; transformer: roterY (180deg);
Noen border-radius lagt til .dør og .dør div gir oss en mer vennlig estetikk. Og til slutt kobler vi til skrifttypen Kalam på Google-fonter for å polere den siste typografiske detaljen:
stiler:
/ * lagt til .door div * / font-family: 'Kalam', kursiv; farge: # 385052; skriftstørrelse: 2em; font-weight: bold; tekstskygge: 1px 1px 0 rgba (255, 255, 255, 0.2);
Det handler om å bryte opp ting! Selvfølgelig er dette egentlig bare for nyhetsverdi og praktiserende CSS Grid (statusen til hver dør er ikke lagret for neste nettlesersøkt eller noe), men vi har kommet langt med bare noen oppslag og noen stiler.
Støtte er et siste punkt å nevne; Det er noen aspekter av denne opplæringen som ikke har fullstendig nettleserstøtte ennå - for noen tips om hvordan du skal håndtere dette, se ressursene som er koblet under.
Jeg håper du nyter opplæringen, og liker å telle ned dagene!
