Accentsconagua
Share
În acest tutorial vom construi un calendar de advent de sezon, folosind CSS Grid, SVG, și o mână de majorete festive! Să începem să aruncăm o privire asupra a ceea ce vom lucra - faceți clic pe zile pentru a vedea ce este dedesubt:
De fapt, nu aveți nevoie de mult pentru acest tutorial, doar un editor de cod (înclinat pe CodePen pentru a ușura lucrurile) și câteva cunoștințe de bază HTML și CSS. Tu voi au nevoie de unele imagini festive, deși - am făcut ilustrații de către masatarul foarte talentat de la Envato Elements (sunt vector și absolut perfect pentru asta):
Copii fericiți sărbătorind Crăciunul
Grup de copii și pom de CrăciunPentru calendarul Advent vom folosi 25 de elemente de rețea; unul pentru fiecare zi care duce până la Crăciun și altul pentru a ține un titlu grafic. Va arata cam asa ceva pe ecrane mici:
Și pe ecranele mari:
Elementul grill turcoaz va păstra graficul titlului.
Pentru a elimina lucrurile, vom avea nevoie de 25 de articole într-un container, așa că să punem împreună câteva coduri HTML:
Bacsis: Având în vedere natura repetitivă a acestui marcaj, ați putea prefera să folosiți un limbaj templating precum HAML. HAML vă va permite să vă bucurați de peste 24 de articole pentru a vă salva scrierea fiecăruia. Următorul fragment mic se compilează în exact ceea ce vedeți mai sus:
% section.grid-1% div.title - (1 ... 24) % div : class => "zi - # i"
Când vom cuibui mai multe elemente în cadrul acestor divizii, veți aprecia timpul în care HAML vă salvează!
Să adăugăm acum câteva stiluri de bază pentru a ne stabili grila. Începem prin alocare afișare: grilă; la elementul nostru container. Apoi, după anumite dimensiuni, definim elementele grilei.
/ * mobilul primul layout grilă * / .grid-1 display: grilă; lățime: 96%; max-lățime: 900px; marja: 2% auto; grilă-șablon-coloane: repeat (3, 1fr); grilă-șablon-rânduri: auto; grid-gap: 25px;
Am plecat "pe primul loc", deci veți vedea că definim numai trei coloane pentru a începe; vom folosi o interogare media într-un moment pentru a permite ecrane mai mari.
grilă-șablon-coloane: repeat (3, 1fr); ne dă trei coloane, fiecare cu o lățime egală (unitate de la 1)grilă-șablon-rânduri: auto; este de fapt valoarea implicită, dar afirmă că rândurile nu vor avea nici o înălțime specifică atribuită lor - putem adăuga cât de mult ne place și vor crește cu conținutul.grid-gap: 25px; definește jgheaburile noastre.De fapt, tot ce ne trebuie, Grid se poate ocupa de lucrurile de aici, dacă l-am lăsat, dar vrem să fim mai specifici cu privire la locul în care plasăm fiecare element din rețea. Din acest motiv vom folosi zonele de rețea.
Putem să atribuim un nume fiecărei zone din grilă pe care am definit-o și o putem scrie într-un mod foarte vizual:
grid-template-areas: "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";
Aici numim prima zonă, care cuprinde trei coloane pe primul rând T (unde vom plasa titlul). Este posibil ca acest nume să nu fie cel mai util, dar va face treaba acum. Fiecare din celelalte zone are un nume în funcție de numerele de zi și, după cum puteți vedea, le putem pune oriunde vrem. Abilitatea de a pune lucrurile "la întâmplare" este perfectă pentru un calendar de advent.
Odată cu adăugarea unei interogări media, putem schimba (cu ușurință) aspectul pentru ecrane mai mari.
/ * interogare media * / numai în ecranul @media și (min-width: 500px) .grid-1 grid-template-coloane: repeat (6, 1fr); grid-matriță domenii: "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";
Cu această interogare media afirmăm că pentru porturile de vizualizare mai mari de 500 pixeli (cifră arbitrară) vom schimba grila astfel încât să aibă șase coloane: grilă-șablon-coloane: repetați (6, 1fr);.
Și putem redefini complet aranjamentul elementelor, plasând zilele oriunde ne simțim. Veți observa că blocul de titlu acum ocupă trei coloane și trei rânduri în partea stângă sus, iar d24 ocupă o suprafață de 2 × 2, pentru a le conferi o mai mare importanță. Acest lucru va deveni clar atunci când atribuim elementele noastre de rețea la zonele de rețea în pasul următor.
Deocamdată, nu putem vedea nimic din ceea ce am făcut, deci să adăugăm câteva stiluri provizorii elementelor de rețea pentru a face lucrurile vizibile.
secțiunea div fundal: # 2e313d; padding: 40px;
Aruncati o privire:
Aveți nevoie de un grund pe zonele de rețea? Aflați mai multe despre întregul lucru în tutorialul acestui începător:
Acum trebuie să alocăm elementelor noastre de rețea în zonele pe care le-am stabilit. Facem acest lucru după cum urmează:
/ * elemente individuale * / .title arie de rețea: t; . zi-1 zona grilă: d1; . zi-2 zona grilă: d2; . zi-3 zona grilă: d3; ...
Ne puteți vedea pe noi div.title a fost alocată zonei de rețea T, și fiecare zi a fost atribuită unei zone corespunzătoare. Nimic de spus nu-i poți aloca .zi-3 la aria de rețea: d16; desigur, alegem doar să organizăm lucrurile în acest fel. Cum arată?
Aceasta este structura de bază ordonată, acum trebuie să facem ușile noastre CSS. Vom pune două divizii în fiecare element de rețea - unul pentru partea din față a ușii, altul pentru partea din spate - ambele înfășurate într-un alt div și vom folosi un hack pentru a răsturna întregul lucru când este a făcut clic.
Începem prin adăugarea unei etichete, a casetei de selectare și a divizelor pentru fiecare element de rețea:
Din nou, trebuie să faceți acest lucru pentru toate cele 24 de elemente de rețea, care reprezintă o bucată voluminoasă de marcaj repetitiv de 245 de linii lungi, astfel încât veți putea găsi ajutor HAML. Iată cum ar arăta asta:
% div : class => "day - # i"% etichetă% input : type => "checkbox").
Cu o umplutură ușor ajustată, toate casetele de control arată acum:
Pregătiți-vă; ceea ce vine este, fără îndoială, cel mai complex aspect al întregii construcții. Este o bucata mare si foarte putine lucrari fara ca totul sa fie prezent, deci purtati-ma cu mine. Vom face unele schimbări cu 3D Transforms.
În primul rând, ascundem căsuțele de bifare, apoi afirmăm că dorim ca un anumit nivel de perspectivă să fie aplicat etichetelor noastre (perspectivă: 1000px; mânere că). stilul transformat: păstrați-3d; afirmă că copiii etichetei vor fi afișați într-un spațiu 3D în loc de un plan plat. Apoi folosim câteva stiluri Flexbox pentru a vă asigura că eticheta completează întreaga zonă disponibilă.
Unele stiluri pe .uşă (care conține fețele din față și din spate), apoi setați calendarul de tranziție și faceți mai bine lucrurile ordonate:
/ * stiluri de ușă * / .grid-1 intrare display: none; etichetă perspective: 1000px; stilul transformat: păstrați-3d; cursor: pointer; afișaj: flex; min-înălțime: 100%; lățime: 100%; înălțime: 120px; .door (lățime: 100%; stilul transformat: păstrați-3d; tranziție: toate 300ms; margine: 2px spart transparent;
Bine, acum să ne concentrăm pe fețele din față și din spate ale ușii noastre.
.ușa div poziție: absolută; înălțime: 100%; lățime: 100%; spate-vizibilitate: ascuns; afișaj: flex; aliniere: centru; justify-content: centru; .back .back back-color: # 2e313d; transform: rotateY (180deg);
.ușa div selectorul punctează la ambele .față si .înapoi divs. Îl folosim pentru a face ca fiecare să fie 100% lățimea și înălțimea lui .uşă container, și poziționat în partea stângă sus. Regulile Flexbox asigură că conținutul din (numărul) este aliniat central și spate-vizibilitate: ascuns; regula asigură că nici una dintre fețe nu poate fi văzută atunci când partea lor inversă este îndreptată spre noi. Acest lucru este important, pe măsură ce ne concentrăm apoi pe .înapoi și puneți-o să se răstoarne transform: rotateY (180deg);.
Toate acestea au condus la ceea ce este de fapt un efect destul de rece. Vom folosi starea verificată a căsuței pentru a trece la fețe. Când facem clic pe etichetă (care umple întreaga zonă grila) verifică și Debifarea caseta, chiar dacă nu este afișat. În funcție de starea respectivă, modificăm în ce fel .uşă intampina.
etichetă: hover.door border-color: # 385052; : verificat + .door transform: rotateY (180deg);
Prima regulă ne dă o stare de hover. A doua regulă folosește un selector adiacent, deci atunci când a .uşă elementul este imediat precedat de a : verificat elementul îl rotiți cu 180 de grade pe axa Y (îl răsturnăm). Toate acestea ne dau funcționalitatea fundamentală a ușilor!
Să facem lucrurile să arate destul. Prima vizuală pe care o vom introduce este graficul titlului nostru. Folosind copii fericiți care sărbătoresc ilustrația de Crăciun, am luat titlul, am schimbat detaliile și am salvat un fișier SVG.
Bacsis: pentru vectori detaliați ca acestea, în Illustrator mergeți la Obiect> Cale> Simplificați ... și puteți reduce complexitatea. Prin reducerea numărului de curbe și puncte puteți reduce semnificativ dimensiunea fișierului fără a pierde prea mult din efectul general.
Există câteva moduri în care putem adăuga această imagine la pagină, dar tocmai am plasat o imagine img etichetă în marcajul nostru:
Unele stiluri ne dau fluiditatea imaginii și o aliniem central în zona de rețea:
.titlu display: flex; aliniere: centru; justify-content: centru; .titul img lățime: 90%; înălțime: auto;
Pentru a spori fundalul gol adăugăm un alt SVG (zăpadă și nori) către corp prin CSS:
corp fundal: url (snow-bg.svg) nr-repeat top center # 82d8cb; dimensiunea fundalului: capac;
Fiecare dintre cele 24 de uși trebuie să aibă o imagine ascunsă în spatele lor. Din nou, am putea face acest lucru în câteva moduri diferite, dar în acest caz vom salva o grămadă de fișiere SVG și le vom adăuga ca fundaluri prin CSS. Pentru fiecare ușă, după ce definim zona ei de rețea, vom avea o regulă pentru .înapoi față:
.ziua-6 zona grilă: d6; . zi-6 .back background: url (snowflake.svg);
Aceasta este ceea ce ne dă:
Destul de bine! Acum trebuie doar să îngrijim aceste imagini cu niște reguli generale.
În primul rând, aceste imagini de fundal trebuie să apară o singură dată, așa că vom adăuga a fără repetare. De asemenea, ele trebuie să fie centrale și scalate corespunzător.
.ușă .back background-size: conține; fundal-poziție: centru centru; background-repeat: nu-repeta; fundal-culoare: # 2e313d; transform: rotateY (180deg);
niste border-radius adăugat la .uşă și .ușa div ne oferă o estetică mai prietenoasă. Și, în sfârșit, ne trimitem linkurile la fonturile de tip Kalam pe Google pentru a lustrui ultimul detaliu tipografic:
stiluri:
/ * adăugat la. div interior * / font-family: 'Kalam', cursive; culoare: # 385052; font-size: 2m; font-weight: bold; text-shadow: 1px 1px 0 rgba (255, 255, 255, 0,2);
Asta se întâmplă cu lucrurile! Desigur, acest lucru este doar pentru valoarea de noutate și practicarea Grid CSS (statutul fiecărei uși nu este salvat pentru următoarea sesiune de browser sau orice altceva), dar am parcurs un drum lung cu doar câteva marcaj și unele stiluri.
Sprijinul este un ultim punct de menționat; există câteva aspecte ale acestui tutorial care nu beneficiază totuși de sprijinul complet al browserului - pentru câteva sfaturi despre cum să rezolvați acest lucru, consultați resursele de mai jos.
Sper că vă bucurați de tutorial și vă bucurați să numărați zilele!
