Share
În acest tutorial vom folosi CSS Grid pentru a ne ajuta să creăm un "layout of the grid broken", ceva care a fost întotdeauna dificil cu metodele tradiționale de layout CSS.
Iată la ce lucrăm (aruncăm o privire la versiunea mai mare pentru efectul complet):
Acest design se bazează pe opera lui Anthony Harmon, a cărei lucrare este perfectă pentru demo-ul nostru. Aruncați o privire la acest aspect pe care la făcut pentru Rel Acoustics:
Noroc Anthony :)Designerii web au devenit condiționați de-a lungul anilor pentru a observa fluxul documentelor și ordinea surselor; crearea de machete prin blocuri plutitoare și lăsarea lor să umple pagina ca cărămizi de construcție. În lumea designului receptiv această abordare pare destul de naturală. Cu toate acestea, este un strigăt departe de aspectul imprimării, unde dimensiunile fixe înseamnă că designerii pot plasa în mod confidențial text și imagini exact unde doresc, ducând la aspecte mai experimentale și mai îndrăznețe vizuale.
CSS Grid, dincolo de ceea ce ne permite doar să aranjăm lucrurile de-a lungul axelor x și y, ne poate ajuta să punem capăt decalajului de aspect și să devenim mai îndrăzneți cu designul nostru!
"Trebuie sa incepem sa reimaginam ce design grafic bun poate fi cu lucrurile care se suprapun" - Jen Simmons
E timpul să te blochezi.
Grilele coloane nu trebuie să fie uniforme. Să luăm o secțiune a planului de mai sus și să ne dăm seama cum ar putea arăta grila.
Notă: construim o secțiune în acest tutorial. Nu există niciun motiv pentru care fiecare secțiune de pagină nu poate fi construită din rețele independente.
Vom începe cu un marcaj, un container de rețea:
Apoi, pe containerul acela, vom declara afișare: grilă; apoi definiți coloanele și rândurile.
.grid1 display: grilă; grilă-șablon-coloane: 3fr 6fr 1fr 5fr 10fr 2fr; grilă-șablon-rânduri: 100px auto 15px auto auto;
Coloanele sunt prezentate așa cum le vedeți în imaginea de mai sus. fr unitatea este o fracțiune din întreaga lățime, astfel încât prima coloană ocupă trei, cea de-a doua este mai largă și ocupă șase. În total aspectul nostru cuprinde 27 de unități de lățime - greu clasic proporții de rețea!
Rândurile sunt puțin diferite. Veți vedea un amestec de măsurători de pixeli fixați și auto. Unde auto este folosit, rândul va crește și se va micșora în funcție de conținut.
Să începem cu imaginile. Pentru marcaj avem câteva opțiuni; fie noi folosim img elemente sau folosim alte elemente cu fundal de imagine.
Am putea folosi obiect: capac; pe img elemente, dar asta e complicat - de ce ne face viața mai dificilă ?! Deci, pentru acest demo vom merge cu acesta din urmă, pentru că asta ne oferă o mai mare flexibilitate în ceea ce privește modul în care proporțiile imaginilor se schimbă cu aspecte fluide.
Salutați-vă la unele bune diviziuni:
Cu câteva imagini de fundal pentru a le acoperi:
.img1 fundal: url (wooden.jpg); dimensiunea fundalului: capac; .img2 fundal: url (speaker.jpg); dimensiunea fundalului: capac; .img3 fundal: url (valuri.jpg); dimensiunea fundalului: capac;
Gridul algoritmului de plasare automată le-ar fi pus deja pe grila noastră, dar să ne lămurim. Vom folosi liniile de rețea pentru a dicta unde trebuie să înceapă și să se termine fiecare element.
Prima noastră imagine începe pe coloana 1 și se termină pe 3. Putem defini astfel:
grilă-coloană: 1/3;
sau astfel:
grilă-coloană: 1 / interval 2;
În ceea ce privește rândurile, prima noastră imagine trebuie să înceapă pe linia de rând 2 și să se termine pe 5, pe care o putem declara astfel:
grilă-rând: 2/5;
sau asta:
grilă-rând: 2 / span 3;
Să facem același lucru și pentru celelalte două imagini ale noastre. Cu asta trebuie să vă încheiați cu:
Desigur, nu este deosebit de impresionant, dar asta pentru că majoritatea rândurilor nu au încă o înălțime. O să obțină asta odată ce începem să adăugăm mai mult conținut în pasul următor.
Pentru mai multe informații despre cum grilă coloană și grilă rând lucrați, aruncați o privire la aceste tutoriale rapide:
Să adăugăm acum conținutul textual; o blocaj de bloc într-un ambalaj și blocul de chemare la acțiune. Puteți adăuga aceste elemente oriunde doriți, ca elemente copil ale site-ului .grid1 containerul, ordinea sursă nu contează.
"Aproape imediat, răspândirea cuvântului a unui Welshman care a construit acest sistem incredibil de sonorizare sub bas și, în curând, audiofili au început să caute în aceste legendare subsoluri construite ca nici un alt".Gibraltar
Introducerea 212 / SE, subwoofer-ul nostru cel mai puternic și mai agil, proiectat exclusiv pentru sisteme și camere mai mari, pentru a permite boxelor superioare de vârf să apară pe o voce plină.
Vezi detalii despre produs →
Apoi, înainte de a face ceva, le vom poziționa pe grila, așa cum am făcut cu imaginile:
.strapline grilă-coloană: 3 / span 3; grilă-rând: 2 / span 1; .ceta-wrapper grilă-coloană: 4 / span 2; grilă-rând: 4 / span 2;
Privind mai bine!
În acest moment merită notat că poți să te joci cu z-index dacă vrei. Stivuirea urmează în mod implicit ordinea sursă; ceea ce este primul în marcaj va fi plasat în partea de jos, ceea ce este declarat mai târziu merge pe partea de sus. Dar dacă ne-am aplica z-index: 1; la .img1 ar fi stivuit pe partea de sus a .img2.
Pornirea inspectorului de browser vă va ajuta în prezent cu aspectul rețelei. În inspectorul Chrome, selectarea elementelor va trage linii de grilă și măsurători, cum ar fi:
Inspectorul din Firefox va face și mai mult, permițându - vă să suprapuneți grila folosind controalele din schemă tab. Puteți afișa numerele de linie, denumirile zonelor și puteți naviga pe suprafețele rețelei pe o versiune miniaturală mai mică:
Bacsis: când vizualizați sub reguli , atingeți pictograma grila de lângă afişa pentru a comuta suprapunerea:
Prin inspectarea rețelei veți realiza rapid dacă ați deplasat greșit orice elemente din rețea, ați omis un rând aici sau acolo sau ați numit ceva incorect.
Unele declarații rapide ale fontului și stiluri de butoane vor avea acest aspect chiar mai bine, fără prea mult efort. Vom începe prin conectarea unor fonturi Google în al documentului:
Folosim Open Sans pentru organism, Afișare Playfair pentru blocarea și poziția blocului. Să le aplicăm:
corp culoare: # 292929; font: 1e / 1.7 'Open sans', sans-serif; blockquote font: italic 1.1 / 2 'Playfair Display', serif; marja: 0 0 2em 0; .cta h1 font: bold 6e / 1 'Playfair Display', serif; marcă: 0 0 20px 0; poziție: relativă;
Acum, unele stiluri de butoane:
.buton display: inline-block; culoare albă; text-decoration: nici unul; fundal: # 292929; padding: .8em 1.5em; .button: hover fundal: negru;
În cele din urmă, vom alinia blocul de blocuri la centru, apoi vom adăuga niște cearceafuri la apelul la acțiune, ajutând la completarea rândului în care a fost plasat. Iată ce ar trebui să aveți acum:
Rețineți că ne construim aspectul pentru un port de vizualizare larg. Ceea ce vedeți încorporat în tutorial ar putea să nu pară optim.
Proiectul cu care lucrăm are câteva atingeri vizuale pe care nu le-am folosit încă. Am putea adăuga aceste lucruri în diverse moduri, dar nu sunt așa conţinut ca atare, le vom adăuga folosind pseudo elemente CSS. În primul rând, cioplirea deasupra blocului de blocuri:
.strapline margin-top: 100px; poziție: relativă; .strapline :: înainte de content: "; display: block; fundal: url (wavy.svg) repeat-x; dimensiune fundal: cover; lățime: 20%; 3em; stânga: 40%;
Aceste stiluri folosesc a ::inainte de pseudo element pe .STRAPLINE div, poziționându-l deasupra containerului însuși, utilizând o poziție negativă de sus. Este perfect centrat și vă veți aminti că am lăsat suficient spațiu pentru asta, definind primul rând ca fiind de 100 de pixeli înălțime.
Vom face ceva similar pentru o insignă SVG pe titlu:
.cta h1 :: înainte de conținut: "; afișare: bloc; înălțime: 1em; lățime: 1em; fundal: url (badge.svg) centru de centru fără repetiție: dimensiune fundal: 80%; 120px; top: 0;
Din nou, folosim un element pseudo pentru că este pur și simplu o inflorire vizuală, spre deosebire de conținutul valoros. Asta nu înseamnă că nu ai putut să-l adaugi ca pe un
Ne-am construit acum o structura foarte gresita de gratar! Este timpul pentru câțiva pași care urmează să o luați și mai departe.
CSS Grid este destul de bine susținut în zilele noastre, deși IE11 necesită în continuare o versiune prefixată, deci este posibil să doriți să înfășurați stilurile de rețea într-o @supports declaraţie. Ar arata cam asa:
@supports (afișare: grilă) / * grid layout * / .grid1 display: grid; grilă-șablon-coloane: 3fr 6fr 1fr 5fr 10fr 2fr; grilă-șablon-rânduri: 100px auto 15px auto auto; ...
Orice browser care nu suportă în mod corespunzător Grid-ul CSS va ignora tot ceea ce ați plasat în această declarație, oferindu-vă opțiunea de a oferi o rezervă.
Aruncați o privire la Grid "backbacks" și suprascrie idei despre modul în care trebuie să înlocuiți stilul.
Aspectul nostru arată ascuțit pe ecrane mai mari, dar când este presat în ferestre de vizualizare mai mici (cum ar fi atunci când sunt încorporate în acest tutorial) apar câteva fisuri. Cum v-ați descurca într-un mod receptiv? Adăugarea interogărilor media vă va permite să stabiliți mai întâi stilurile, apoi să vă construiți treptat pentru a stabili și a face grila mai complexă, deoarece porturile de vizualizare devin mai extinse:
.grid1 display: grilă; grilă-șablon-coloane: 1fr 1fr; Numai ecranul @media și (min-width: 768px) .grid1 grid-template-coloane: 3fr 6fr 1fr 5fr 10fr 2fr; grilă-șablon-rânduri: 100px auto 15px auto auto;
S-ar putea să alegeți să ascundeți acele flori pe care le-am creat pe dispozitivele mai mici, salvându-le până când există mai multe proprietăți pe ecran cu care să vă jucați. Alegerea este a ta!
Iată un exemplu despre modul în care puteți face acest design special să răspundă.
Acest tutorial vă oferă o privire asupra lumii aranjamentelor alternative realizabile cu Gridul CSS. Uitați schemele pe care le-ați practicat cu flotoare și poziționare; spargeți obiceiurile vechi! Începeți să explorați aspecte mai complicate și să vedem dacă putem face webul mai interesant.
Accentsconagua