V prejšnjem članku sem si ogledal zmožnost CSS Grid, da ustvari zapletene postavitve z uporabo svojih moči samodejnega umeščanja. V drugem članku sem naredil še korak dlje slikam v mrežni postavitvi je dodal učinek povečave lebdenja. Tokrat se želim potopiti v drugo vrsto mreže, tisto, ki deluje z oblikami.
Na primer, kaj če slike niso popolnoma kvadratne, ampak imajo obliko šesterokotnikov ali rombov? Spoiler opozorilo: zmoremo. Pravzaprav bomo združili tehnike CSS Grid, ki smo si jih ogledali, in dodali nekaj CSS clip-path in mask magija za ustvarjanje domišljijskih mrež slik za skoraj vsako obliko, ki si jo lahko zamislite!
Začnimo z oznako
Večina postavitev, ki si jih bomo ogledali, je morda na prvi pogled videti enostavno dosegljiva, vendar je izziv doseči jih z enaka oznaka HTML. Uporabimo lahko veliko ovojev, divs in še kaj, toda cilj te objave je uporabiti enako in najmanjšo količino kode HTML in še vedno dobiti vse različne mreže, ki jih želimo. Konec koncev, kaj je CSS kot način za ločevanje stilov in oznak? Naš stajling ne sme biti odvisen od oznake in obratno.
Kot rečeno, začnimo s tem:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Tukaj potrebujemo vsebnik s slikami. Nič več!
CSS mreža šesterokotnikov
To se včasih imenuje tudi mreža "satja".
Obstaja že veliko drugih objav v spletnem dnevniku, ki prikazujejo, kako to narediti. Hudiča, jaz napisal eno tukaj na CSS-Tricks! Ta članek je še vedno dober in je zelo pomemben pri oblikovanju odzivne postavitve. Toda v tem posebnem primeru se bomo zanašali na veliko preprostejši pristop CSS.
Najprej uporabimo clip-path na slikah, da ustvarimo obliko šesterokotnika, in vse postavimo v isto mrežno območje, tako da se prekrivajo.
.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%)Nič posebnega še. Vse slike so šesterokotniki in ena nad drugo. Tako je videti, da je vse, kar imamo, en sam slikovni element v obliki šesterokotnika, v resnici pa jih je sedem.
Naslednji korak je uporaba prevoda za slike, da jih pravilno postavite na mrežo.
Upoštevajte, da še vedno želimo, da ena od slik ostane v središču. Ostali so nameščeni okoli njega s pomočjo CSS translate in dobro staromodno geometrijo. Tukaj so lažne formule, ki sem jih iznašel za vsako sliko v mreži:
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))Nekaj izračunov in optimizacije kasneje (preskočimo tisti dolgočasni del, kajne?) dobimo naslednji 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)); }Mogoče bo lažje, ko pridemo realne trigonometrične funkcije v CSS!
Vsaka slika je prevedena s --_x in --_y spremenljivke, ki temeljijo na teh formulah. Samo druga slika (nth-child(2)) ni definiran v nobenem izbirniku, ker je tisti v sredini. Lahko je katera koli slika, če se odločite za drugačen vrstni red. Tukaj je vrstni red, ki ga uporabljam:
Z le nekaj vrsticami kode dobimo kul mrežo slik. Temu sem slikam dodal majhen učinek lebdenja, da bi bile stvari lepše.
Ugani kaj? S preprosto posodobitvijo nekaj vrednosti lahko dobimo drugo šesterokotno mrežo.
Če preverite kodo in jo primerjate s prejšnjo, boste opazili, da sem preprosto zamenjal vrednosti znotraj clip-path in sem preklapljal med --x in --y. To je vse!
CSS mreža rombov
Romb je tako modna beseda za kvadrat, ki je zasukan za 45 stopinj.
Isti HTML, se spomnite? Najprej začnemo z definiranjem mreže slik 2×2 v 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;
}Prva stvar, ki vam lahko pade v oči, je grid premoženje. Uporablja se precej redko, vendar je zelo koristen, saj je okrajšava, ki vam omogoča, da v eni deklaraciji definirate celotno mrežo. To ni najbolj intuitivna — in da ne omenjamo berljiva — lastnost, vendar smo tu za to naučiti in odkriti nove stvari, zato ga raje uporabimo, kot da izpišemo vse posamezne lastnosti mreže.
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);To definira dva stolpca, enaka --s spremenljivko in nastavi višino vseh vrstic na --s prav tako. Ker imamo štiri slike, bomo samodejno dobili mrežo 2×2.
Tukaj je še en način, kako bi lahko zapisali:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));... ki se lahko zmanjša z grid stenografija:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Ko nastavimo mrežo, jo in slike zavrtimo s CSS transforms in dobimo tole:
Upoštevajte, kako obračam oba 45deg, vendar v nasprotni smeri.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Zasuk slik v negativno smer preprečuje, da bi se zasukale skupaj z mrežo, tako da ostanejo ravne. Zdaj uporabljamo a clip-path da iz njih izrežete obliko romba.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Skoraj smo končali! Popraviti moramo velikost slike, da bosta ustrezali skupaj. V nasprotnem primeru so tako daleč narazen, da ne izgledajo kot mreža slik.
Slika je znotraj meje zelenega kroga, ki je včrtan krog mrežnega območja, kjer je slika postavljena. Želimo narediti sliko večjo, da se prilega rdečemu krogu, ki je obkrožen krog območja mreže.
Ne skrbite, ne bom več predstavil dolgočasne geometrije. Vse kar morate vedeti je, da je razmerje med polmerom vsakega kroga kvadratni koren iz 2 (sqrt(2)). To je vrednost, ki jo potrebujemo, da povečamo velikost naših slik, da zapolnijo območje. Bomo uporabili 100%*sqrt(2) = 141% in končano!
.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%);
}Tako kot pri šesterokotni mreži lahko stvari naredimo bolj domiselne s tem lepim učinkom lebdenja pri povečavi:
CSS mreža trikotnih oblik
Verjetno že veste, da je velik trik ugotoviti, clip-path da dobimo želene oblike. Za to mrežo ima vsak element svojega clip-path medtem ko sta zadnji dve mreži delovali s konsistentno obliko. Tokrat je tako, kot da delamo z nekaj različnimi trikotnimi oblikami, ki se združijo v pravokotno mrežo slik.
Postavimo jih znotraj mreže 3×2 z naslednjim 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%); } }Evo, kaj dobimo:
Zadnji dotik je, da je širina srednjega stolpca enaka 0 da se znebite presledkov med slikami. Enako težavo z razmikom, kot smo jo imeli z mrežo romba, vendar z drugačnim pristopom za oblike, ki jih uporabljamo:
grid-template-columns: auto 0 auto;Moral sem se ukvarjati s clip-path vrednosti, da zagotovite, da se vse lepo ujemajo kot sestavljanka. Izvirne slike se prekrivajo, ko ima srednji stolpec ničelno širino, a po rezanju slik je iluzija popolna:
CSS Pizza Pie Grid
Ugani kaj? Z enostavnim dodajanjem lahko dobimo še eno hladno mrežo border-radius in overflow na naše mreže ali trikotne oblike. 🎉
CSS mreža kosov sestavljanke
Tokrat se bomo igrali s CSS mask lastnosti, da so slike videti kot koščki sestavljanke.
Če niste uporabili mask z Prelivi CSS, Toplo priporočam ta drugi članek Na to temo sem pisal, ker bo pomagalo pri tem, kar sledi. Zakaj prelivi? Ker to uporabljamo, da dobimo okrogle zareze v oblikah koščkov sestavljanke.
Nastavitev mreže bi morala biti že preprosta, zato se raje osredotočimo na mask del.
Kot je prikazano v zgornji predstavitvi, potrebujemo dva preliva, da ustvarimo končno obliko. En gradient ustvari krog (zeleni del), drugi pa ustvari desno krivuljo, medtem ko zapolni zgornji del.
--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;Dve spremenljivki nadzorujeta obliko. The --g spremenljivka ni nič drugega kot mrežna vrzel. Upoštevati moramo vrzel, da pravilno postavimo naše kroge, tako da se popolnoma prekrivajo, ko je celotna sestavljanka sestavljena. The --r spremenljivka nadzira velikost krožnih delov oblike sestavljanke.
Zdaj vzamemo isti CSS in posodobimo nekaj vrednosti v njem, da ustvarimo tri druge oblike:
Imamo oblike, ne pa tudi prekrivajočih se robov, ki jih potrebujemo, da se prilegajo skupaj. Vsaka slika je omejena na mrežno celico, v kateri je, zato je logično, zakaj so oblike trenutno nekako pomešane:
Ustvariti moramo preliv s povečanjem višine/širine slik. Iz zgornje slike moramo povečati višino prve in četrte slike, medtem ko povečamo širino druge in tretje. Verjetno ste že uganili, da jih moramo povečati z uporabo --r spremenljivka.
.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));
}Bližamo se!
Ustvarili smo prekrivanje, vendar se naše slike privzeto prekrivajo na desni (če povečamo širino) ali na dnu (če povečamo višino). Toda to ni tisto, kar želimo za drugo in četrto sliko. Popravek je uporaba place-self: end na teh dveh slikah in naša polna koda postane to:
Tukaj je še en primer, kjer uporabljam stožčasti gradient namesto radialnega gradienta. Tako dobimo trikotne dele sestavljanke, hkrati pa ohranimo isti osnovni HTML in CSS.
Še zadnja! Tokrat uporabljam clip-path in ker je to lastnost, ki jo lahko animiramo, dobimo kul lebdenje s preprosto posodobitvijo lastnosti po meri, ki nadzoruje obliko.
Zavijanje
To je vse za ta prvi del! Z združevanjem stvari, ki smo se jih že naučili o mreži CSS, z nekaterimi dodanimi clip-path in mask magic, smo lahko naredili mrežne postavitve z različnimi vrstami oblik. In vsakič smo uporabili isto oznako HTML! In sama oznaka ni nič drugega kot vsebnik s peščico slikovnih elementov!
V drugem delu bomo raziskali mreže bolj zapletenega videza z bolj domiselnimi oblikami in učinki lebdenja.
Načrtujem posneti predstavitev razširljivih slikovnih plošč, ki sva jih naredila skupaj ta drugi članek:
... in ga preoblikujte v cik-cak slikovne plošče! In to je le en primer izmed mnogih, ki jih bomo odkrili v naslednjem članku.
