Accentsconagua
Share
In questo tutorial costruiremo un calendario dell'avvento stagionale utilizzando CSS Grid, SVG e una manciata di allegria festosa! Iniziamo dando un'occhiata a ciò che lavoreremo verso i clic per vedere cosa c'è sotto:
In realtà non hai bisogno di molto per questo tutorial, solo un editor di codice (incline a CodePen per semplificare le cose) e alcune conoscenze HTML e CSS di base. tu volontà Però ho bisogno di alcune immagini festive - Ho preso le illustrazioni dal talentuoso masastarus di Envato Elements (sono vettoriali e assolutamente perfetti per questo):
Bambini felici che celebrano il Natale
Gruppo di bambini e albero di NatalePer il nostro calendario dell'Avvento utilizzeremo 25 elementi della griglia; uno per ciascuno dei giorni precedenti a Natale e un altro per contenere un titolo grafico. Sembrerà qualcosa di simile su schermi piccoli:
E questo su schermi più grandi:
L'elemento griglia turchese terrà la nostra grafica del titolo.
Per dare il via abbiamo bisogno di 25 elementi in un contenitore, quindi mettiamo insieme un po 'di codice HTML:
Mancia: Data la natura ripetitiva di questo markup, potresti preferire usare un linguaggio di template come HAML. HAML ti consente di eseguire il loop di oltre 24 elementi per salvarti nella scrittura di ognuno di essi. Il seguente piccolo frammento si inserisce esattamente in quello che vedi sopra:
% section.grid-1% div.title - (1 ... 24) .each do | i | % div : class => "day - # i"
Quando annidiamo ancora più elementi all'interno di queste div, apprezzerai il tempo che HAML ti ha salvato!
Aggiungiamo ora alcuni stili di base per stabilire la nostra griglia. Iniziamo assegnando display: grid; al nostro elemento contenitore. Quindi, dopo alcune dimensioni, definiamo gli elementi della griglia.
/ * primo layout di griglia mobile * / .grid-1 display: grid; larghezza: 96%; larghezza massima: 900 px; margine: 2% automatico; grid-template-columns: repeat (3, 1fr); grid-template-rows: auto; intercapedine: 25px;
Siamo passati al "primo dispositivo mobile", quindi vedremo che stiamo definendo solo tre colonne per iniziare; utilizzeremo una query multimediale in un momento per consentire schermi più grandi.
grid-template-columns: repeat (3, 1fr); ci dà tre colonne, ciascuna di uguale larghezza (unità 1fr)grid-template-rows: auto; è in realtà il valore predefinito, ma afferma che le righe non avranno un'altezza specifica attribuita a loro: possiamo aggiungerne quante ne vogliamo e cresceranno con il contenuto.intercapedine: 25px; definisce le nostre grondaie.Questo è tutto ciò di cui abbiamo bisogno, Grid può gestire le cose da qui se lo lasciamo, ma vogliamo essere più specifici su dove posizionare ogni elemento della griglia. Per questo motivo useremo le Grid Areas.
Possiamo assegnare un nome a ciascuna area della griglia che abbiamo definito e possiamo anche scriverlo in modo molto visivo:
aree del modello di griglia: "t t t" "d23 d20 d12" "d2 d14" "d5 d22 d16" "d1 d7 d9" "d10 d11 d18" "d13 d3 d15" "d6 d17 d8" "d19 d24 d21";
Qui stiamo nominando la prima area, che si estende su tre colonne sulla prima riga t (dove stiamo andando a posizionare il titolo). Questo potrebbe non essere il nome più utile, ma farà il lavoro per ora. A ciascuna delle altre aree viene assegnato un nome in base ai numeri del giorno e, come puoi vedere, possiamo metterli dove vogliamo. La capacità di deporre le cose "casualmente" in questo modo è perfetta per un calendario dell'avvento.
Con l'aggiunta di una query multimediale possiamo (molto facilmente) modificare il layout per gli schermi più grandi.
/ * media query * / @media solo schermo e (min-width: 500px) .grid-1 grid-template-columns: repeat (6, 1fr); aree del modello di griglia: "t t t d2 d7 d8" "t t t d4 d11 d12" "t t d19 d9 d13" "d6 d24 d24 d24 d24 d20" "d17 d18 d24 d24 d10 d22" "d3 d23 d16 d14 d10 d15";
Con questa query multimediale affermiamo che per le finestre di larghezza superiore a 500 px (cifra arbitraria) cambieremo la griglia in modo che abbia sei colonne: grid-template-columns: repeat (6, 1fr);.
E possiamo ridefinire completamente l'arrangiamento degli oggetti, ponendo le giornate ovunque ne abbiamo voglia. Noterai che il cartiglio ora occupa tre colonne e tre righe in alto a sinistra, e d24 occupa un'area di 2 × 2, per dare più significato. Questo diventerà chiaro quando assegneremo i nostri elementi della griglia alle aree della griglia nel passaggio successivo.
Per ora, non possiamo vedere nulla di ciò che abbiamo fatto, quindi aggiungiamo alcuni stili provvisori agli elementi della griglia per rendere le cose visibili.
section div background: # 2e313d; imbottitura: 40px;
Guarda:
Hai bisogno di un primer sulle aree della griglia? Scopri di più sull'intera cosa in questo tutorial per principianti:
Ora dobbiamo assegnare i nostri elementi della griglia alle aree che abbiamo definito. Lo facciamo come segue:
/ * singoli articoli * / .title grid-area: t; .day-1 grid-area: d1; .day-2 grid-area: d2; .day-3 grid-area: d3; ...
Puoi vedere il nostro div.title è stato assegnato all'area della griglia t, e ogni giorno è stato assegnato ad un'area corrispondente. Non c'è niente da dire che non puoi assegnare .giorno-3 a grid-area: d16; naturalmente, stiamo solo scegliendo di organizzare le cose in questo modo. Come va??
Questa è la struttura di base in ordine, ora dobbiamo creare le nostre porte CSS. Inseriremo due div all'interno di ogni oggetto della griglia, uno per la parte anteriore della porta, un altro per la parte posteriore, entrambi avvolti in un'altra div, e useremo un hack di controllo per capovolgere l'intero giro quando è cliccato.
Iniziamo aggiungendo un'etichetta, una casella di controllo e le div a ciascun elemento della griglia:
Di nuovo, devi fare questo per tutti e 24 gli elementi della griglia, che è un grosso pezzo di markup ripetitivo lungo 245 righe, quindi potresti trovare utile HAML. Ecco come sarebbe:
% div : class => "day - # i"% label% input : type => "checkbox" .door .front # i .back
Con imbottitura leggermente regolata, ecco come appaiono ora tutte queste caselle di controllo:
Preparatevi; quello che sta arrivando è probabilmente il più complesso di tutta questa build. È un grosso pezzo e pochissime opere senza che tutto sia presente, quindi abbi pazienza con me. Faremo un po 'di movimento con 3D Transforms.
In primo luogo, nascondiamo le caselle di controllo, quindi affermiamo che vogliamo applicare un certo livello di prospettiva alle nostre etichette (prospettiva: 1000px; gestisce quello). transform-style: preserve-3d; afferma che i bambini dell'etichetta saranno visualizzati in uno spazio 3D invece che lungo un piano. Quindi usiamo alcuni stili di Flexbox per assicurarci che l'etichetta riempia l'intera area disponibile.
Alcuni stili sul .porta elemento (che contiene le facce anteriore e posteriore) quindi imposta il tempo di transizione e riordina le cose ulteriormente:
/ * stili porta * / .grid-1 input display: none; label perspective: 1000px; transform-style: preserve-3d; cursore: puntatore; display: flex; altezza minima: 100%; larghezza: 100%; altezza: 120 px; .door width: 100%; transform-style: preserve-3d; transizione: tutti i 300ms; border: 2px dashed transparent;
Ok, ora concentrati sulle facce anteriori e posteriori della nostra porta.
.porta div posizione: assoluta; altezza: 100%; larghezza: 100%; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; .door .back background-color: # 2e313d; trasformare: ruotare Y (180 °);
Il .porta div selettore punta a entrambi .davanti e il .indietro div. Lo usiamo per rendere ciascuno al 100% la larghezza e l'altezza del .porta contenitore, e assolutamente posizionato in alto a sinistra. Le regole di Flexbox assicurano che il contenuto all'interno (il numero) sia allineato centralmente e il backface-visibility: hidden; la regola assicura che nessuno dei volti possa essere visto quando il loro lato opposto è rivolto verso di noi. Questo è importante, poiché ci concentriamo su .indietro e impostalo per capovolgere con trasformare: ruotare Y (180 °);.
Tutto ciò ha portato a ciò che è in realtà un effetto piuttosto interessante. Utilizzeremo lo stato selezionato della casella di controllo per trasformare i volti. Quando clicchiamo sull'etichetta (che riempie l'intera area della griglia), essa controlla e deseleziona la casella di controllo, anche se non è visualizzata. A seconda di quello stato, alteriamo il modo in cui il .porta sta affrontando.
label: hover .door border-color: # 385052; : checked + .door transform: rotateY (180deg);
La prima regola ci dà uno stato di passaggio del mouse. La seconda regola usa un selettore adiacente, quindi quando a .porta l'elemento è immediatamente preceduto da a : selezionata elemento lo ruotiamo di 180 gradi sull'asse Y (lo giriamo sopra). Tutto ciò ci dà la nostra fondamentale funzionalità di porta!
Facciamo sembrare le cose belle. La prima immagine che inseriremo è la nostra grafica del titolo. Uso dei bambini felici che celebrano l'illustrazione di Natale Ho preso il titolo, modificato i dettagli e salvato un file SVG.
Mancia: per i vettori dettagliati come questi, in Illustrator vai a Oggetto> Percorso> Semplifica ... e puoi ridurre la complessità. Ritagliando il numero di curve e punti si può ridurre significativamente la dimensione del file senza perdere troppo dell'effetto generale.
Ci sono alcuni modi in cui possiamo aggiungere questa immagine alla pagina, ma ho appena inserito un img tag nel nostro markup:
Alcuni stili conferiscono fluidità alla nostra immagine e la allineano centralmente all'interno dell'area della griglia:
.titolo display: flex; align-items: center; justify-content: center; .title img width: 90%; altezza: auto;
Per migliorare lo sfondo vuoto aggiungiamo un altro SVG (la nevicata e le nuvole) al corpo tramite CSS:
body background: url (snow-bg.svg) no-repeat top center # 82d8cb; dimensione di sfondo: copertina;
Ognuna delle nostre 24 porte deve anche avere un'immagine nascosta dietro di esse. Di nuovo, potremmo farlo in diversi modi, ma in questo caso salveremo un mucchio di file SVG e li aggiungeremo come sfondi tramite il CSS. Per ogni porta, dopo aver definito la sua area della griglia, avremo una regola per il .indietro viso:
.day-6 grid-area: d6; .day-6 .back background: url (snowflake.svg);
Questo è ciò che ci dà:
Piuttosto buono! Ora abbiamo solo bisogno di riordinare quelle immagini con alcune regole generali.
Per prima cosa, quelle immagini di sfondo devono apparire solo una volta, quindi aggiungeremo un no-repeat. Devono anche essere centrali e ridimensionati correttamente.
.door .back background-size: contenere; posizione di sfondo: centro; background-repeat: no-repeat; background-color: # 2e313d; trasformare: ruotare Y (180 °);
Alcuni border-radius aggiunto a .porta e .porta div ci dà un'estetica più amichevole. E infine, colleghiamo il font Kalam su Google fonts per lucidare l'ultimo dettaglio tipografico:
stili:
/ * aggiunto a .door div * / font-family: 'Kalam', corsivo; colore: # 385052; font-size: 2em; font-weight: bold; text-shadow: 1px 1px 0 rgba (255, 255, 255, 0,2);
Quello di avvolgere le cose! Naturalmente, questo è davvero solo per il valore della novità e la pratica della griglia CSS (lo stato di ciascuna porta non viene salvato per la prossima sessione del browser o altro) ma abbiamo fatto molta strada con solo alcuni markup e alcuni stili.
Il supporto è un ultimo punto da menzionare; ci sono alcuni aspetti di questo tutorial che non godono ancora del supporto completo del browser: per alcuni suggerimenti su come gestire questo problema, vedi le risorse collegate sotto.
Spero ti piaccia il tutorial e divertiti a contare i giorni!
