Egy korábbi cikkben megvizsgáltam a CSS Grid azon képességét összetett elrendezéseket hozhat létre az automatikus elhelyezési képességek segítségével. Ezt egy lépéssel továbbléptem egy másik cikkben nagyítási lebegtetési effektust adott a rácsos elrendezésű képekhez. Ezúttal egy másik típusú rácsba szeretnék belemerülni, egy olyanba, amely az alakzatokkal működik.
Például, mi van akkor, ha a képek nem tökéletesen négyzet alakúak, hanem hatszög vagy rombusz alakúak? Spoiler figyelmeztetés: meg tudjuk csinálni. Valójában egyesíteni fogjuk a már megvizsgált CSS Grid technikákat, és néhány CSS-t bevetünk clip-path és a mask varázslat, hogy képzeletbeli képrácsokat hozzon létre szinte bármilyen alakzathoz, amelyet el tud képzelni!
Kezdjük egy kis jelöléssel
Az általunk vizsgált elrendezések többsége első pillantásra könnyen megvalósíthatónak tűnik, de a kihívást az jelenti, hogy ugyanaz a HTML jelölés. Sok csomagolóanyagot használhatunk, divs, és miegymás, de ennek a bejegyzésnek az a célja, hogy ugyanannyi és a legkisebb mennyiségű HTML-kódot használjunk, és továbbra is megkapjuk a kívánt különböző rácsokat. Végül is mi más a CSS, mint a stílus és a jelölés elkülönítésének módja? A stílusunk nem függhet a jelöléstől, és fordítva.
Ez azt mondta, kezdjük ezzel:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Itt csak egy képekkel ellátott tárolóra van szükségünk. Semmi több!
Hatszögek CSS-rácsa
Ezt néha „méhsejt” rácsnak is nevezik.
Már rengeteg más blogbejegyzés létezik, amelyek bemutatják, hogyan kell ezt elkészíteni. A fenébe, én írt egyet itt a CSS-Tricks-en! Ez a cikk továbbra is jó, és nagyon sokat foglalkozik a reszponzív elrendezés elkészítésével. De ebben a konkrét esetben egy sokkal egyszerűbb CSS-megközelítésre fogunk hagyatkozni.
Először is használjuk clip-path a képeken a hatszög alakzat létrehozásához, és mindegyiket ugyanabba a rácsterületbe helyezzük, hogy átfedjék egymást.
.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%)Még semmi divatos. Az összes kép hatszög alakú és egymás felett van. Úgy tűnik tehát, hogy csak egyetlen hatszög alakú képelemünk van, de valójában hét van.
A következő lépés egy fordítás alkalmazása a képekre, hogy megfelelően helyezze el őket a rácson.
Figyeljük meg, hogy továbbra is szeretnénk, ha az egyik kép a középpontban maradna. A többit CSS segítségével helyezzük el körülötte translate és a jó öreg geometria. Íme a képletek, amelyeket a rács minden egyes képéhez találtam ki:
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))Néhány számítással és optimalizálással később (ezt az unalmas részt hagyjuk ki, ugye) a következő CSS-t kapjuk:
.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)); }Talán könnyebb lesz, ha megérkezünk valódi trigonometriai függvények a CSS-ben!
Minden képet a --_x és a --_y változók, amelyek ezeken a képleteken alapulnak. Csak a második kép (nth-child(2)) nincs definiálva egyik választóban sem, mert ez a középen van. Bármilyen kép lehet, ha úgy dönt, hogy más sorrendet használ. Íme az általam használt sorrend:
Csak néhány sornyi kóddal hűvös képrácsot kapunk. Ehhez adtam egy kis lebegés effektust a képekhez, hogy szebb legyen a dolog.
Találd ki? Néhány érték frissítésével újabb hatszögrácsot kaphatunk.
Ha megnézed a kódot és összehasonlítod az előzővel, észre fogod venni, hogy egyszerűen felcseréltem a benne lévő értékeket clip-path és váltottam közöttük --x és a --y. Ez minden!
Rombuszok CSS-rácsa
A rombusz olyan divatos szó egy 45 fokkal elforgatott négyzetre.
Ugyanaz a HTML, emlékszel? Először egy 2×2-es képrács meghatározásával kezdjük a CSS-ben:
.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;
}Az első dolog, ami megakadhat, az a grid ingatlan. Meglehetősen szokatlanul használják, de rendkívül hasznos, mivel ez egy gyorsírás, amely lehetővé teszi egy teljes rács meghatározását egyetlen deklarációban. Nem ez a legintuitívabb – és nem is beszélve – olvasható tulajdonság, de azért vagyunk itt tanulni és a felfedez új dolgokat, ezért inkább használjuk, ne írjuk ki az egyes rácstulajdonságokat.
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);Ez két oszlopot határoz meg, amelyek egyenlőek a --s változót, és az összes sor magasságát értékre állítja --s is. Mivel négy képünk van, automatikusan kapunk egy 2×2-es rácsot.
Íme egy másik módja annak, hogy megírhattuk volna:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…amely csökkenthető a grid gyorsírás:
grid: repeat(2,var(--s)) / repeat(2,var(--s));A rács beállítása után CSS-sel elforgatjuk azt és a képeket transforms és ezt kapjuk:
Figyeld meg, hogyan forgatom el mindkettőt 45deg, de az ellenkező irányba.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Ha a képeket negatív irányba forgatja, megakadályozza, hogy a rács elfordítsa őket, így egyenesek maradnak. Most alkalmazzuk a clip-path hogy rombusz alakot vágjunk ki belőlük.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Már majdnem készen vagyunk! Javítanunk kell a kép méretét, hogy illeszkedjenek egymáshoz. Ellenkező esetben olyan távolságra helyezkednek el egymástól, hogy nem úgy néz ki, mint egy képrács.
A kép a zöld kör határán belül van, amely annak a rácsterületnek a beírt köre, ahol a kép el van helyezve. Azt szeretnénk, hogy a kép nagyobb legyen, hogy beleférjen a piros körbe, ami a rácsterület körülírt köre.
Ne aggódj, nem vezetek be unalmasabb geometriát. Csak annyit kell tudnia, hogy az egyes körök sugara közötti összefüggés 2 (sqrt(2)). Ez az az érték, amelyre szükségünk van a képeink méretének növeléséhez, hogy kitöltsék a területet. Használni fogjuk 100%*sqrt(2) = 141% és kész!
.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%);
}A hatszögrácshoz hasonlóan a dolgokat még szebbé tehetjük azzal a szép zoom lebegő effektussal:
Háromszög alakú CSS-rács
Valószínűleg mostanra már tudja, hogy a nagy trükk az, hogy kitaláljuk a clip-path hogy megkapjuk a kívánt formákat. Ennél a rácsnál minden elemnek megvan a sajátja clip-path érték, míg az utolsó két rács egységes alakzattal működött. Tehát ezúttal olyan, mintha néhány különböző háromszög alakzattal dolgoznánk, amelyek összeállnak egy téglalap alakú képrácsot alkotva.
Egy 3×2-es rácsba helyezzük őket a következő CSS-szel:
.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%); } }Íme, amit kapunk:
Az utolsó simítás a középső oszlop szélességének egyenlővé tétele 0 hogy megszabaduljunk a képek közötti résektől. Ugyanaz a térköz-probléma, mint a rombuszrácsnál, de más megközelítéssel az általunk használt alakzatokhoz:
grid-template-columns: auto 0 auto;Bíznom kellett a clip-path értékeket, hogy megbizonyosodjon arról, hogy mindegyik remekül illeszkedik egymáshoz, mint egy puzzle. Az eredeti képek átfedik egymást, ha a középső oszlop szélessége nulla, de a képek szeletelése után az illúzió tökéletes:
CSS Pizza Pie rács
Találd ki? Egyszerűen hozzáadva egy másik hűvös rácsot kaphatunk border-radius és a overflow rácsunkra vagy háromszög alakzatainkra. 🎉
Rejtvénydarabok CSS-rácsa
Ezúttal a CSS-sel fogunk játszani mask tulajdonság, hogy a képek úgy nézzenek ki, mint egy puzzle darabjai.
Ha még nem használta mask val vel CSS gradiensek, Nagyon ajánlom ezt a másik cikket Azért írtam a témába, mert az segít a továbbiakban. Miért színátmenetek? Mert ezt használjuk arra, hogy a kirakós darab formák kerek bevágásait megkapjuk.
A rács felállítása mostanra egyszerű feladat, ezért inkább a mask rész.
Ahogy a fenti demóban is látható, két színátmenetre van szükségünk a végső alakzat létrehozásához. Az egyik színátmenet kört hoz létre (a zöld részt), a másik pedig a megfelelő görbét, miközben kitölti a felső részt.
--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;Két változó szabályozza az alakzatot. Az --g változó nem más, mint a rácsrés. Számolnunk kell a réssel, hogy helyesen helyezzük el köreinket, hogy tökéletesen átfedjék egymást, amikor az egész puzzle össze van állítva. Az --r változó szabályozza a puzzle alakzat kör alakú részeinek méretét.
Most ugyanazt a CSS-t vesszük, és frissítünk benne néhány értéket a másik három alakzat létrehozásához:
Megvannak a formák, de nem az átfedő élek, amelyekre szükségünk van ahhoz, hogy illeszkedjenek egymáshoz. Minden kép arra a rácscellára korlátozódik, amelyben van, így érthető, hogy az alakzatok jelenleg miért vannak zavarosak:
Túlcsordulást kell létrehoznunk a képek magasságának/szélességének növelésével. A fenti ábrából az első és a negyedik kép magasságát, míg a második és harmadik kép szélességét növelnünk kell. Valószínűleg már sejtette, hogy növelnünk kell őket a --r változót.
.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));
}Egyre közelebb vagyunk!
Létrehoztuk az átfedést, de alapértelmezés szerint a képeink vagy a jobb oldalon (ha növeljük a szélességet) vagy alul (ha növeljük a magasságot) fedik egymást. De nem ezt akarjuk a második és a negyedik képnél. A javítás a használat place-self: end ezen a két képen, és a teljes kódunk ez lesz:
Itt van egy másik példa, ahol kúpos gradienst használok radiális gradiens helyett. Ezáltal háromszög alakú puzzle-darabokat kapunk, miközben ugyanazt a HTML-t és CSS-t megőrizzük.
Egy utolsó! Ezúttal én használom clip-path és mivel ez egy olyan tulajdonság, amelyet animálhatunk, hűvös lebegtetést kapunk, ha egyszerűen frissítjük az alakzatot vezérlő egyéni tulajdonságot.
Csomagolta
Ennyi az első részhez! A CSS Gridről már tanult dolgokat kombinálva néhány hozzáadott elemmel clip-path és a mask varázslat, különböző formákat tartalmazó rácselrendezéseket tudtunk készíteni. És minden alkalommal ugyanazt a HTML-jelölést használtuk! Maga a jelölés pedig nem más, mint egy konténer maroknyi arculati elemmel!
A második részben bonyolultabb kinézetű rácsokat fogunk felfedezni, divatosabb formákkal és lebegő effektusokkal.
Azt tervezem, hogy elkészítem a közösen készített bővítő képpanelek bemutatóját ezt a másik cikket:
…és alakítsa át cikk-cakk képpanelekké! És ez csak egy példa a sok közül, amelyeket a következő cikkben fogunk felfedezni.
