Într-un articol anterior, m-am uitat la capacitatea CSS Grid de a creați machete complexe folosind puterile sale de plasare automată. Am făcut un pas mai departe într-un alt articol care a adăugat un efect de zoom de trecere la imaginile într-un aspect grilă. De data aceasta, vreau să mă scufund într-un alt tip de grilă, una care funcționează cu forme.
Cum ar fi, ce se întâmplă dacă imaginile nu sunt perfect pătrate, ci au formă de hexagoane sau romburi? Alertă spoiler: putem face asta. De fapt, vom combina tehnicile CSS Grid pe care le-am analizat și vom introduce unele CSS clip-path și mask magie pentru a crea grile fanteziste de imagini pentru aproape orice formă îți poți imagina!
Să începem cu niște markupuri
Majoritatea aspectelor pe care le vom analiza pot părea ușor de realizat la prima vedere, dar partea dificilă este să le realizăm cu același marcaj HTML. Putem folosi o mulțime de ambalaje, divs și altele, dar scopul acestei postări este de a folosi aceeași și cea mai mică cantitate de cod HTML și de a obține în continuare toate grilele diferite pe care le dorim. La urma urmei, ce este CSS decât o modalitate de a separa stilul și marcajul? Stilul nostru nu ar trebui să depindă de marcaj și invers.
Acestea fiind spuse, să începem cu asta:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Un container cu imagini este tot ce avem nevoie aici. Nimic mai mult!
Grilă CSS de hexagoane
Aceasta este uneori denumită și grilă „fagure de miere”.
Există deja o mulțime de alte postări pe blog care arată cum să faci asta. La naiba, eu a scris unul aici pe CSS-Tricks! Acest articol este încă bun și este foarte profund în realizarea unui aspect receptiv. Dar pentru acest caz specific, ne vom baza pe o abordare CSS mult mai simplă.
În primul rând, să folosim clip-path pe imagini pentru a crea forma hexagonală și le plasăm pe toate în aceeași zonă de grilă, astfel încât să se suprapună.
.gallery {
--s: 150px; /* controls the size */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%)Nimic de lux încă. Toate imaginile sunt hexagoane și una deasupra celeilalte. Deci, se pare că tot ce avem este un singur element de imagine în formă de hexagon, dar există într-adevăr șapte.
Următorul pas este să aplicați o traducere imaginilor pentru a le plasa corect pe grilă.
Observați că vrem în continuare ca una dintre imagini să rămână în centru. Restul sunt plasate în jurul lui folosind CSS translate și geometrie de modă bună. Iată formulele simulate cu care am venit pentru fiecare imagine din grilă:
translate((height + gap)*sin(0deg), (height + gap)*cos(0))
translate((height + gap)*sin(60deg), (height + gap)*cos(60deg))
translate((height + gap)*sin(120deg), (height + gap)*cos(120deg))
translate((height + gap)*sin(180deg), (height + gap)*cos(180deg))
translate((height + gap)*sin(240deg), (height + gap)*cos(240deg))
translate((height + gap)*sin(300deg), (height + gap)*cos(300deg))Câteva calcule și optimizare mai târziu (să sărim peste acea parte plictisitoare, nu?) obținem următorul CSS:
.gallery {
--s: 150px; /* control the size */
--g: 10px; /* control the gap */
display: grid;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1.15;
object-fit: cover;
clip-path: polygon(25% 0%, 75% 0%, 100% 50% ,75% 100%, 25% 100%, 0 50%);
transform: translate(var(--_x,0), var(--_y,0));
}
.gallery > img:nth-child(1) { --_y: calc(-100% - var(--g)); }
.gallery > img:nth-child(7) { --_y: calc( 100% + var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(5) { --_x: calc(-75% - .87*var(--g)); }
.gallery > img:nth-child(4),
.gallery > img:nth-child(6) { --_x: calc( 75% + .87*var(--g)); }
.gallery > img:nth-child(3),
.gallery > img:nth-child(4) { --_y: calc(-50% - .5*var(--g)); }
.gallery > img:nth-child(5),
.gallery > img:nth-child(6) { --_y: calc( 50% + .5*var(--g)); }Poate că va fi mai ușor când vom ajunge funcții de trigonometrie reale în CSS!
Fiecare imagine este tradusă de --_x și --_y variabile care se bazează pe acele formule. Doar a doua imagine (nth-child(2)) este nedefinit în niciun selector pentru că este cel din centru. Poate fi orice imagine dacă decideți să utilizați o altă ordine. Iată ordinea pe care o folosesc:
Cu doar câteva linii de cod, obținem o grilă grozavă de imagini. La aceasta, am adăugat un mic efect de hover imaginilor pentru a face lucrurile mai frumoase.
Ghici ce? Putem obține o altă grilă hexagonală prin simpla actualizare a câtorva valori.
Dacă verificați codul și îl comparați cu cel anterior, veți observa că pur și simplu am schimbat valorile din interior clip-path și am schimbat între --x și --y. Asta e tot!
Grila CSS de romburi
Rombul este un cuvânt atât de elegant pentru un pătrat care este rotit la 45 de grade.
Același HTML, vă amintiți? Mai întâi începem prin a defini o grilă de imagini 2×2 în CSS:
.gallery {
--s: 150px; /* controls the size */
display: grid;
gap: 10px;
grid: auto-flow var(--s) / repeat(2, var(--s));
place-items: center;
}
.gallery > img {
width: 100%;
aspect-ratio: 1;
object-fit: cover;
}Primul lucru care vă poate atrage atenția este grid proprietate. Este destul de neobișnuit folosit, dar este foarte util, deoarece este o scurtătură care vă permite să definiți o grilă completă într-o singură declarație. Nu este cea mai intuitivă - și ca să nu mai vorbim de lizibilă - proprietate, dar suntem aici învăţa și descoperi lucruri noi, așa că haideți să-l folosim în loc să scriem toate proprietățile individuale ale grilei.
grid: auto-flow var(--s) / repeat(2,var(--s));
/* is equivalent to this: */
grid-template-columns: repeat(2, var(--s));
grid-auto-rows: var(--s);Aceasta definește două coloane egale cu --s variabilă și setează înălțimea tuturor rândurilor la --s de asemenea. Deoarece avem patru imagini, vom obține automat o grilă 2×2.
Iată un alt mod în care am fi putut scrie:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…care poate fi redusă cu grid stenografie:
grid: repeat(2,var(--s)) / repeat(2,var(--s));După setarea grilei, o rotim și imaginile cu CSS transforms și obținem asta:
Observați cum le rotesc pe amândouă 45deg, dar în sens invers.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Rotirea imaginilor în direcția negativă le împiedică să se rotească cu grila, astfel încât să rămână drepte. Acum, aplicăm a clip-path pentru a tăia din ele o formă de romb.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Aproape am terminat! Trebuie să rectificăm dimensiunea imaginii pentru a le face să se potrivească. În caz contrar, ele sunt distanțate până la punctul în care nu arată ca o rețea de imagini.
Imaginea se află în limita cercului verde, care este cercul înscris din zona grilei în care este plasată imaginea. Ceea ce dorim este să facem imaginea mai mare pentru a se potrivi în interiorul cercului roșu, care este cercul circumscris zonei grilei.
Nu vă faceți griji, nu voi introduce nicio geometrie mai plictisitoare. Tot ce trebuie să știți este că relația dintre raza fiecărui cerc este rădăcina pătrată a lui 2 (sqrt(2)). Aceasta este valoarea de care avem nevoie pentru a mări dimensiunea imaginilor noastre pentru a umple zona. Noi vom folosi 100%*sqrt(2) = 141% și gata!
.gallery {
--s: 150px; /* control the size */
display: grid;
grid: auto-flow var(--s) / repeat(2,var(--s));
gap: 10px;
place-items: center;
transform: rotate(45deg);
}
.gallery > img {
width: 141%; /* 100%*sqrt(2) = 141% */
aspect-ratio: 1;
object-fit: cover;
transform: rotate(-45deg);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}La fel ca și grila hexagonală, putem face lucrurile mai frumoase cu acel efect de hover de zoom:
Grilă CSS de forme triunghiulare
Probabil că știi până acum că marele truc este să-ți dai seama clip-path pentru a obține formele pe care le dorim. Pentru această grilă, fiecare element are al său clip-path valoare, în timp ce ultimele două grile au lucrat cu o formă consistentă. Deci, de data aceasta, este ca și cum am lucra cu câteva forme triunghiulare diferite care se unesc pentru a forma o rețea dreptunghiulară de imagini.
Le plasăm într-o grilă 3×2 cu următorul CSS:
.gallery {
display: grid;
gap: 10px;
grid-template-columns: auto auto auto; /* 3 columns */
place-items: center;
}
.gallery > img {
width: 200px; /* controls the size */
aspect-ratio: 1;
object-fit: cover;
}
/* the clip-path values */
.gallery > img:nth-child(1) { clip-path: polygon(0 0, 50% 0, 100% 100% ,0 100%); }
.gallery > img:nth-child(2) { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.gallery > img:nth-child(3) { clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%); }
.gallery > img:nth-child(4) { clip-path: polygon(0 0, 100% 0, 50% 100%, 0 100%); }
.gallery > img:nth-child(5) { clip-path: polygon(50% 0, 100% 100%, 0% 100%); }
.gallery > img:nth-child(6) { clip-path: polygon(0 0, 100% 0 ,100% 100%, 50% 100%); } }Iată ce primim:
Atingerea finală este aceea de a egala lățimea coloanei din mijloc 0 pentru a scăpa de spațiile dintre imagini. Același tip de problemă de spațiere pe care l-am avut cu grila romb, dar cu o abordare diferită pentru formele pe care le folosim:
grid-template-columns: auto 0 auto;A trebuit să mă joc cu clip-path valori pentru a vă asigura că toate ar părea să se potrivească frumos ca un puzzle. Imaginile originale se suprapun atunci când coloana din mijloc are lățime zero, dar după tăierea imaginilor, iluzia este perfectă:
CSS Pizza Pie Grid
Ghici ce? Putem obține o altă grilă cool prin simpla adăugare border-radius și overflow la grila sau formele noastre triunghiulare. 🎉
Grilă CSS de piese de puzzle
De data aceasta ne vom juca cu CSS mask proprietatea de a face imaginile să arate ca piese ale unui puzzle.
Dacă nu ați folosit mask cu Gradienți CSS, Recomand acest alt articol Am scris despre acest subiect pentru că va ajuta cu ceea ce urmează. De ce degrade? Pentru că asta folosim pentru a obține crestăturile rotunde în formele pieselor de puzzle.
Configurarea grilei ar trebui să fie simplă până acum, așa că să ne concentrăm în schimb pe mask parte.
După cum este ilustrat în demonstrația de mai sus, avem nevoie de două degrade pentru a crea forma finală. Un gradient creează un cerc (partea verde), iar celălalt creează curba dreaptă în timp ce umple partea de sus.
--g: 6px; /* controls the gap */
--r: 42px; /* control the circular shapes */
background:
radial-gradient(var(--r) at left 50% bottom var(--r), green 95%, #0000),
radial-gradient(calc(var(--r) + var(--g)) at calc(100% + var(--g)) 50%, #0000 95%, red)
top/100% calc(100% - var(--r)) no-repeat;Două variabile controlează forma. The --g variabila nu este altceva decât decalajul dintre grilă. Trebuie să luăm în considerare decalajul pentru a ne plasa corect cercurile, astfel încât să se suprapună perfect atunci când întregul puzzle este asamblat. The --r variabila controlează dimensiunea părților circulare ale formei puzzle-ului.
Acum luăm același CSS și actualizăm câteva valori în el pentru a crea celelalte trei forme:
Avem formele, dar nu marginile suprapuse de care avem nevoie pentru a le face să se potrivească. Fiecare imagine este limitată la celula grilă în care se află, așa că are sens de ce formele sunt cam amestecate în acest moment:
Trebuie să creăm un overflow prin creșterea înălțimii/lățimii imaginilor. Din figura de mai sus, trebuie să creștem înălțimea primei și a patra imagini în timp ce creștem lățimea celei de-a doua și a treia. Probabil ați ghicit deja că trebuie să le creștem folosind --r variabilă.
.gallery > img:is(:nth-child(1),:nth-child(4)) {
width: 100%;
height: calc(100% + var(--r));
}
.gallery > img:is(:nth-child(2),:nth-child(3)) {
height: 100%;
width: calc(100% + var(--r));
}Ne apropiem!
Am creat suprapunerea, dar, implicit, imaginile noastre fie se suprapun în dreapta (dacă creștem lățimea) fie în partea de jos (dacă creștem înălțimea). Dar nu asta ne dorim pentru a doua și a patra imagine. Remedierea este utilizarea place-self: end pe acele două imagini și codul nostru complet devine acesta:
Iată un alt exemplu în care folosesc un gradient conic în loc de un gradient radial. Acest lucru ne oferă piese de puzzle triunghiulare, păstrând în același timp același HTML și CSS.
Un ultim! De data asta folosesc clip-path și, deoarece este o proprietate pe care o putem anima, obținem un hover cool prin simpla actualizare a proprietății personalizate care controlează forma.
La finalul
Asta e tot pentru prima parte! Combinând lucrurile pe care le-am învățat deja despre CSS Grid cu unele adăugate clip-path și mask magic, am reușit să facem machete de grilă cu diferite tipuri de forme. Și am folosit același marcaj HTML de fiecare dată! Și marcajul în sine nu este altceva decât un container cu o mână de elemente de imagine!
În a doua parte, vom explora grile cu aspect mai complex, cu forme mai fanteziste și efecte de hover.
Plănuiesc să fac demonstrația de extindere a panourilor de imagini pe care le-am făcut împreună acest alt articol:
… și transformați-l într-o panouri cu imagini în zig-zag! Și acesta este doar un exemplu dintre multele pe care le vom descoperi în articolul următor.
