Accentsconagua
Share
In deze tutorial gaan we een seizoensgebonden adventskalender maken met behulp van CSS Grid, SVG en een handvol feestelijke gejuich! Laten we beginnen met een blik op waar we naartoe werken - klik op de dagen om te kijken wat eronder staat:
Je hebt niet echt veel nodig voor deze tutorial, alleen een code-editor (leun op CodePen om dingen gemakkelijker te maken) en enkele elementaire HTML- en CSS-kennis. U zullen Ik heb wel wat feestelijke visuals nodig - ik heb illustraties gemaakt van de zeer getalenteerde masastarus van Envato Elements (ze zijn vector en absoluut perfect hiervoor):
Gelukkige kinderen die Kerstmis vieren
Groep kinderen en kerstboomVoor onze adventskalender gebruiken we 25 roosteritems; één voor elk van de dagen voorafgaand aan Kerstmis en een ander voor een titelafbeelding. Het zal er ongeveer zo uitzien op kleine schermen:
En dit op grotere schermen:
Het turkooise rasteronderdeel houdt onze titelafbeelding vast.
Om dingen uit te schakelen, hebben we 25 items in een container nodig, dus laten we wat HTML samenvoegen:
Tip: Gezien de herhalende aard van deze opmaak, geeft u er misschien de voorkeur aan een sjablonerende taal zoals HAML te gebruiken. Met HAML kunt u 24 items doorlopen om te voorkomen dat u ze allemaal wegschrijft. Het volgende kleine fragment compileert in wat u hierboven ziet:
% section.grid-1% div.title - (1 ... 24) .each do | i | % div : class => "day - # i"
Wanneer we nog meer elementen in deze divs nesten, zult u de tijd waarderen die HAML u bespaart!
Laten we nu enkele basisstijlen toevoegen om ons raster te maken. We beginnen met toewijzen weergave: raster; naar ons containerelement. Vervolgens definiëren we na enkele dimensies de rasteritems.
/ * mobiele eerste rasterlay-out * / .grid-1 weergave: raster; breedte: 96%; maximale breedte: 900 px; marge: 2% automatisch; rooster-sjabloon-kolommen: herhaling (3, 1fr); grid-template-rows: auto; grid-gap: 25px;
We zijn 'eerst mobiel' gegaan, dus u ziet dat we in eerste instantie slechts drie kolommen definiëren; we zullen in een oogwenk een media-vraag gebruiken om grotere schermen mogelijk te maken.
rooster-sjabloon-kolommen: herhaling (3, 1fr); geeft ons drie kolommen, elk van gelijke breedte (1fr-eenheid)grid-template-rows: auto; is eigenlijk de standaardwaarde, maar er staat dat de rijen geen specifieke hoogte hebben die eraan wordt toegeschreven - we kunnen er zoveel toevoegen als we willen en ze zullen meegroeien met de inhoud.grid-gap: 25px; bepaalt onze dakgoten.Dat is echt alles wat we nodig hebben, Grid kan de dingen vanaf hier aan als we het verlaten, maar we willen meer specifiek zijn over waar we elk rasteritem plaatsen. Om die reden zullen we rastergebieden gebruiken.
We kunnen een naam toekennen aan elk gebied van het rooster dat we hebben gedefinieerd, en we kunnen het ook op een heel visuele manier schrijven:
rooster-sjabloon-gebieden: "tt 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";
Hier noemen we het eerste gebied, dat zich uitstrekt over drie kolommen op de eerste rij t (waar we de titel gaan plaatsen). Dit is misschien niet de meest nuttige naam, maar het zal het werk voorlopig wel doen. Elk van de andere gebieden heeft een naam gekregen in overeenstemming met de dagnummers, en zoals u kunt zien, kunnen we ze plaatsen waar we maar willen. Het vermogen om "willekeurig" op deze manier uit te leggen, is perfect voor een adventskalender.
Met de toevoeging van een mediaquery kunnen we (heel gemakkelijk) de lay-out voor grotere schermen wijzigen.
/ * media query * / @media only screen en (min-width: 500px) .grid-1 grid-template-columns: repeat (6, 1fr); rooster-sjabloon-gebieden: "tt t2d7d8" "tdd4d11d12" "tt d19d9d13" "d6d1d24d24d21d20" "d17d18d24d24d5d22" "d3d23d16d14d10d15";
Met deze mediaquery stellen we dat voor viewports die breder zijn dan 500px (willekeurig cijfer) we het grid zullen veranderen zodat het zes kolommen heeft: rooster-sjabloon-kolommen: herhaal (6, 1fr);.
En we kunnen de indeling van de items volledig opnieuw definiëren, waarbij we de dagen plaatsen waar we maar willen. Je zult zien dat het titelblok nu drie kolommen en drie rijen linksboven opneemt, en d24 een gebied van 2 × 2, om het meer betekenis te geven. Dit wordt duidelijk wanneer we onze grid-items in de volgende stap aan de grid-gebieden toewijzen.
Voor nu kunnen we eigenlijk niets zien van wat we hebben gedaan, dus laten we wat voorlopige stijlen toevoegen aan de roosteritems om dingen zichtbaar te maken.
sectie div background: # 2e313d; opvulling: 40px;
Kijk eens:
Noodzaak van een primer op rastergebieden? Leer meer over het geheel in deze beginnershandleiding:
We moeten nu onze rasteritems toewijzen aan de gebieden die we hebben uiteengezet. We doen dit als volgt:
/ * individuele items * / .title grid-area: t; .day-1 grid-area: d1; .day-2 grid-area: d2; .day-3 grid-area: d3; ...
Je kunt onze zien div.title is toegewezen aan rastergebied t, en elke dag is toegewezen aan een overeenkomstig gebied. Er is niets te zeggen dat je niet kunt toewijzen .dag 3 naar grid-area: d16; natuurlijk kiezen we er gewoon voor om de dingen op deze manier te organiseren. Hoe ziet het eruit?
Dat is de basisstructuur die allemaal is gesorteerd, nu moeten we onze CSS-deuren maken. We zullen twee divs in elk roosteritem plaatsen - een voor de voorkant van de deur, een andere voor de achterkant - beide gewikkeld in een andere div, en we gaan een checkbox-hack gebruiken om het hele ding rond te draaien als het geklikt.
We beginnen met het toevoegen van een label, een selectievakje en de divs aan elk rasteritem:
Nogmaals, je moet dit doen voor alle 24 roosteritems, wat een omvangrijk stuk repetitieve opmaak is van 245 regels lang, dus je zou HAML nuttig kunnen vinden. Hier is hoe dat eruit zou zien:
% div : class => "day - # i"% label% input : type => "checkbox" .door .front # i .back
Met licht aangepaste vulling, dit is hoe al die selectievakjes er nu uitzien:
Bereid je voor; wat er komt, is misschien wel het meest complexe deel van deze hele build. Het is een grote brok en heel weinig werkt zonder dat het hele ding aanwezig is, dus wees geduldig. We gaan wat veranderen met 3D Transforms.
Ten eerste verbergen we de selectievakjes. Vervolgens geven we aan dat we een bepaald perspectiefniveau op onze labels willen hebben (perspectief: 1000 px; behandelt dat). transformatiestijl: bewaren-3d; stelt dat kinderen van het label in een 3D-ruimte worden weergegeven in plaats van in een plat vlak. Vervolgens gebruiken we enkele Flexbox-stijlen om ervoor te zorgen dat het label het hele gebied beschikbaar maakt.
Sommige stijlen op de .deur- element (dat de voor- en achterkant bevat) en stel de overgangstijd in en ruim de zaken verder op:
/ * deurstijlen * / .grid-1 invoer weergave: geen; label perspectief: 1000px; transformatiestijl: bewaren-3d; cursor: pointer; weergave: flex; minimale hoogte: 100%; breedte: 100%; hoogte: 120 px; .door width: 100%; transformatiestijl: bewaren-3d; overgang: alle 300ms; rand: 2px gestippeld transparant;
Oké, nu om ons te concentreren op de voor- en achterkant van onze deur.
.deur div positie: absoluut; hoogte: 100%; breedte: 100%; backface-visibility: verborgen; weergave: flex; align-items: center; justify-content: center; .door .back background-color: # 2e313d; transformeren: rotateY (180deg);
De .deur div selector wijst naar zowel de .voorkant en de .terug divs. We gebruiken het om elke 100% de breedte en hoogte van de te maken .deur- container, en absoluut linksboven geplaatst. De regels van Flexbox zorgen ervoor dat de inhoud binnen (het nummer) centraal wordt uitgelijnd en de backface-visibility: verborgen; regel zorgt ervoor dat geen van de gezichten te zien is wanneer hun achterkant naar ons toe is gekeerd. Dat is belangrijk, omdat we ons dan concentreren op de .terug en stel het in om om te zetten met transformeren: rotateY (180deg);.
Dit alles heeft geleid tot wat eigenlijk een vrij cool effect is. We gaan de gecontroleerde staat van het selectievakje gebruiken om de gezichten over te zetten. Wanneer we op het label klikken (dat het hele rastergebied vult), wordt het selectievakje gecontroleerd en uitgeschakeld, ook al wordt dit niet weergegeven. Afhankelijk van die staat, veranderen we op welke manier het .deur- is geconfronteerd.
label: hover .door border-colour: # 385052; : checked + .door transform: rotateY (180deg);
De eerste regel geeft ons een hover-status. De tweede regel gebruikt een aangrenzende selector, dus wanneer een .deur- element wordt onmiddellijk voorafgegaan door een : aangevinkt element draaien we het 180 graden op de Y-as (we draaien het om). Dat alles geeft ons onze fundamentele deurfunctionaliteit!
Laten we de dingen er mooi uit laten zien. De eerste afbeelding die we gaan bekijken is onze titelafbeelding. Met behulp van de illustratie 'Gelukkige kinderen vieren Kerstmis' heb ik de titel overgenomen, de details gewijzigd en een SVG-bestand opgeslagen.
Tip: voor gedetailleerde vectoren zoals deze, ga je in Illustrator naar Object> Pad> Vereenvoudigen ... en je kunt de complexiteit verminderen. Door het aantal curven en punten in te korten, kunt u de bestandsgrootte aanzienlijk verlagen zonder al te veel van het totale effect te verliezen.
Er zijn een paar manieren waarop we deze afbeelding aan de pagina kunnen toevoegen, maar ik heb zojuist een geplaatst img tag in onze opmaak:
Sommige stijlen geven ons beeld vloeiend en richten het centraal op het rastergebied:
.titel weergave: flex; align-items: center; justify-content: center; .title img width: 90%; hoogte: auto;
Om de blanco achtergrond te verbeteren voegen we nog een SVG (de sneeuwval en wolken) toe aan het lichaam via CSS:
body background: url (snow-bg.svg) no-repeat top midden # 82d8cb; achtergrondformaat: omslag;
Elk van onze 24 deuren moet ook een afbeelding hebben die zich achter hen bevindt. Nogmaals, we zouden dit op een paar verschillende manieren kunnen doen, maar in dit geval zullen we een stapel SVG-bestanden opslaan en deze als achtergrond toevoegen via de CSS. Voor elke deur, nadat we het rastergebied hebben gedefinieerd, hebben we een regel voor de .terug gezicht:
.dag-6 grid-area: d6; .day-6 .back background: url (snowflake.svg);
Dit is wat dat ons geeft:
Redelijk goed! Nu moeten we alleen die afbeeldingen opruimen met enkele algemene regels.
Ten eerste moeten die achtergrondafbeeldingen maar één keer worden weergegeven, dus we voegen er een toe no-repeat. Ze moeten ook centraal staan en op de juiste manier worden geschaald.
.door .back background-size: contains; achtergrond-positie: middelpunt; achtergrondherhaling: geen herhaling; achtergrondkleur: # 2e313d; transformeren: rotateY (180deg);
Sommige border-radius toegevoegd aan .deur- en .deur div geeft ons een vriendelijkere esthetiek. En tot slot linken we naar het lettertype Kalam op Google-lettertypen om dat laatste typografische detail op te poetsen:
styles:
/ * toegevoegd aan .door div * / font-family: 'Kalam', cursief; kleur: # 385052; font-size: 2em; lettertype: vet; text-shadow: 1px 1px 0 rgba (255, 255, 255, 0.2);
Dat over wraps dingen omhoog! Dit is natuurlijk alleen maar voor nieuwheidswaarde en het oefenen van CSS Grid (de status van elke deur wordt niet opgeslagen voor de volgende browsersessie of iets anders) maar we hebben een lange weg afgelegd met slechts enkele markeringen en sommige stijlen.
Ondersteuning is nog een laatste punt om te vermelden; er zijn een paar aspecten van deze zelfstudie die nog geen volledige ondersteuning bieden voor de browser - voor enkele tips over hoe u hiermee om kunt gaan, raadpleegt u de bronnen die hieronder zijn gekoppeld.
Ik hoop dat je de tutorial leuk vindt en geniet van het aftellen van de dagen!
