Eelmises artiklis vaatlesin CSS Gridi võimet luua keerukaid paigutusi, kasutades selle automaatse paigutuse võimeid. Astusin selle sammu edasi teises artiklis, mis lisas ruudustikupaigutuse piltidele suumimise hõljumise efekti. Seekord tahan ma sukelduda teist tüüpi võrku, mis töötab kujunditega.
Mis saab siis, kui kujutised ei ole täiesti ruudukujulised, vaid hoopis kuusnurkade või rombide kujulised? Spoileri hoiatus: saame hakkama. Tegelikult ühendame me vaadeldud CSS Grid tehnikad ja loobume mõnest CSS-ist clip-path ja mask maagia, et luua väljamõeldud kujutiste ruudustik peaaegu iga kuju jaoks, mida võite ette kujutada!
Alustame mõne märgistusega
Enamikku vaadeldavatest paigutustest võib esmapilgul tunduda lihtne saavutada, kuid keeruline osa on nende saavutamine sama HTML-i märgistus. Saame kasutada palju ümbriseid, divs, ja mis muud, aga selle postituse eesmärk on kasutada sama ja väikseimat kogust HTML-koodi ning saada ikkagi kõik erinevad ruudustikud, mida me tahame. Lõppude lõpuks, mis on CSS kui viis stiili ja märgistuse eraldamiseks? Meie stiil ei tohiks sõltuda märgistusest ja vastupidi.
See ütles, alustame sellest:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Siin on kõik, mida vajame, piltidega konteiner. Mitte midagi rohkemat!
Kuusnurkade CSS-võrk
Seda nimetatakse mõnikord ka kärgvõrguks.
Seal on juba palju muid ajaveebi postitusi, mis näitavad, kuidas seda teha. Kurat, ma kirjutas ühe siin CSS-Tricksis! See artikkel on endiselt hea ja läheb tundliku paigutuse loomisel väga põhjalikult ette. Kuid selle konkreetse juhtumi puhul tugineme palju lihtsamale CSS-i lähenemisviisile.
Esiteks kasutame clip-path kuusnurkse kuju loomiseks piltidel ja asetame need kõik samasse ruudustikualasse, et need kattuksid.
.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%)Pole veel midagi uhket. Kõik pildid on kuusnurksed ja üksteise kohal. Seega tundub, et meil on ainult üks kuusnurkne pildielement, kuid tegelikult on neid seitse.
Järgmine samm on piltidele tõlke rakendamine, et need õigesti ruudustikule paigutada.
Pange tähele, et tahame siiski, et üks piltidest jääks keskele. Ülejäänud paigutatakse selle ümber CSS-i abil translate ja vanamoodne geomeetria. Siin on näidisvalemid, mille ma ruudustiku iga pildi jaoks välja mõtlesin:
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))Mõned arvutused ja optimeerimine hiljem (jätame selle igava osa vahele, eks?) saame järgmise CSS-i:
.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)); }Võib-olla on see lihtsam, kui saame tõelised trigonomeetria funktsioonid CSS-is!
Iga pilt on tõlgitud --_x ja --_y muutujad, mis põhinevad neil valemitel. Ainult teine pilt (nth-child(2)) on üheski valijas määramata, kuna see asub keskel. See võib olla mis tahes pilt, kui otsustate kasutada teistsugust tellimust. Siin on järjekord, mida ma kasutan:
Vaid mõne koodirea abil saame laheda piltide ruudustiku. Sellele lisasin piltidele veidi hõljumise efekti, et asi oleks uhkem.
Arva ära? Saame saada teise kuusnurkse ruudustiku, lihtsalt värskendades mõnda väärtust.
Kui kontrollite koodi ja võrdlete seda eelmisega, märkate, et olen lihtsalt sees olevad väärtused vahetanud clip-path ja vahetasin vahel --x ja --y. See on kõik!
CSS-rombide ruudustik
Romb on nii väljamõeldud sõna 45 kraadi pööratud ruudu kohta.
Sama HTML, mäletad? Alustuseks määrame CSS-is 2 × 2 kujutiste ruudustiku:
.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;
}Esimene asi, mis võib teile silma jääda, on grid vara. Seda kasutatakse üsna harva, kuid see on väga kasulik, kuna see on stenogramm, mis võimaldab teil ühes deklaratsioonis määratleda täieliku ruudustiku. See ei ole kõige intuitiivsem – ja rääkimata loetavam – omadus, kuid me oleme siin selleks õppima ja avastama uusi asju, nii et kasutagem seda, mitte kirjutagem välja kõik üksikud ruudustiku omadused.
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);See määratleb kaks veergu, mis on võrdsed --s muutuja ja määrab kõigi ridade kõrguseks --s samuti. Kuna meil on neli pilti, saame automaatselt 2 × 2 ruudustiku.
Siin on veel üks viis, kuidas oleksime võinud selle kirjutada:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…mida saab vähendada grid stenogramm:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Pärast ruudustiku seadistamist pöörame seda ja pilte CSS-iga transforms ja me saame selle:
Pange tähele, kuidas ma neid mõlemaid pööran 45deg, aga vastupidises suunas.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Piltide negatiivses suunas pööramine hoiab ära nende pööramise koos ruudustikuga, nii et need jäävad sirgeks. Nüüd rakendame a clip-path et neist välja lõigata rombi kuju.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Oleme peaaegu valmis! Peame pildi suurust korrigeerima, et need kokku sobiksid. Vastasel juhul on need üksteisest nii kaugel, et see ei näeks välja nagu piltide ruudustik.
Pilt asub rohelise ringi piirides, mis on selle ruudustiku ala sisse kirjutatud ring, kuhu kujutis asetatakse. Me tahame muuta pilti suuremaks, et see mahuks punase ringi sisse, mis on ruudustiku ala piiritletud ring.
Ärge muretsege, ma ei tutvusta enam igavamat geomeetriat. Kõik, mida pead teadma, on see, et iga ringi raadiuse vaheline seos on ruutjuur 2 (sqrt(2)). See on väärtus, mida vajame oma piltide suuruse suurendamiseks, et ala täita. Me kasutame 100%*sqrt(2) = 141% ja olgu tehtud!
.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%);
}Nagu kuusnurkne ruudustik, saame selle kena suumiva hõljumise efektiga asjad veelgi põnevamaks muuta:
Kolmnurksete kujundite CSS-võrk
Tõenäoliselt teate nüüd, et suur trikk on selle välja nuputamine clip-path et saada soovitud kujundid. Selle ruudustiku jaoks on igal elemendil oma clip-path väärtus, samas kui kaks viimast ruudustikku töötasid ühtlase kujuga. Seekord on nii, et töötame mõne erineva kolmnurkse kujuga, mis kokku moodustavad ristkülikukujulise kujutiste ruudustiku.
Asetame need 3 × 2 ruudustiku sisse järgmise CSS-iga:
.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%); } }Siin on see, mida me saame:
Viimane puudutus on muuta keskmise veeru laius võrdseks 0 piltide vahelistest tühikutest vabanemiseks. Sama tüüpi vaheprobleem, mis meil oli rombruudustikuga, kuid meie kasutatavate kujundite jaoks oli erinev lähenemisviis:
grid-template-columns: auto 0 auto;Ma pidin askeldama clip-path väärtusi, et veenduda, et need kõik sobiksid ilusti kokku nagu pusle. Algsed pildid kattuvad, kui keskmise veeru laius on null, kuid pärast piltide lõikamist on illusioon täiuslik:
CSS-i pitsapiruka ruudustik
Arva ära? Lihtsalt lisades saame veel ühe laheda ruudustiku border-radius ja overflow meie ruudustiku või kolmnurkse kujuga. 🎉
Pusletükkide CSS-võrk
Seekord mängime CSS-iga mask omadus, et pildid näeksid välja nagu pusletükid.
Kui te pole seda kasutanud mask koos CSS-i gradientid, Soovitan soojalt see teine artikkel Kirjutasin sellel teemal, sest see aitab järgmiseks. Miks gradiendid? Sest just seda kasutame pusletüki kujundite ümarate sälkude saamiseks.
Võrgustiku seadistamine peaks praeguseks olema lihtne, seega keskendume selle asemel mask osaliselt.
Nagu ülaltoodud demos illustreeritud, vajame lõpliku kuju loomiseks kahte gradienti. Üks gradient loob ringi (roheline osa) ja teine õige kõvera, täites ülemise osa.
--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;Kuju juhivad kaks muutujat. The --g muutuja pole midagi muud kui ruudustiku vahe. Ringide õigeks paigutamiseks peame arvestama tühikuga, nii et need kattuksid ideaalselt, kui kogu pusle on kokku pandud. The --r muutuja juhib pusle kuju ringikujuliste osade suurust.
Nüüd võtame sama CSS-i ja värskendame selles mõnda väärtust, et luua kolm muud kuju:
Meil on kujundid, kuid mitte kattuvad servad, mida vajame, et need kokku sobiksid. Iga pilt piirdub ruudustiku lahtriga, milles see asub, seega on loogiline, miks kujundid on praegu segamini.
Peame tekitama ülevoolu, suurendades piltide kõrgust/laiust. Ülaltoodud jooniselt peame suurendama esimese ja neljanda pildi kõrgust, samal ajal kui suurendame teise ja kolmanda pildi laiust. Tõenäoliselt olete juba arvanud, et peame neid suurendama, kasutades --r muutuja.
.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));
}Jõuame lähemale!
Lõime kattuvuse, kuid vaikimisi kattuvad meie pildid kas paremal (kui suurendame laiust) või alt (kui suurendame kõrgust). Kuid see pole see, mida me teise ja neljanda pildi jaoks tahame. Parandus on kasutada place-self: end nendel kahel pildil ja meie täielik kood muutub järgmiseks:
Siin on veel üks näide, kus ma kasutan radiaalse gradiendi asemel koonust. See annab meile kolmnurksed pusletükid, säilitades samas sama aluseks oleva HTML-i ja CSS-i.
Viimane! Seekord kasutan clip-path ja kuna see on atribuut, mida saame animeerida, saame laheda hõljumise, kui lihtsalt värskendame kuju kontrollivat kohandatud atribuuti.
Pakke kuni
See on esimese osa jaoks kõik! Kombineerides asjad, mida oleme CSS Gridi kohta juba õppinud, mõnede lisadega clip-path ja mask maagia, saime teha erinevat tüüpi kujunditega ruudustikupaigutusi. Ja me kasutasime iga kord sama HTML-märgistust! Ja märgistus ise pole midagi muud kui konteiner käputäie pildielementidega!
Teises osas uurime keerukama välimusega ruudustikke, millel on väljamõeldud kujundid ja hõljukefektid.
Kavatsen teha demo koos tehtud pildipaneelide laiendamisest see teine artikkel:
…ja muutke see siksakilisteks pildipaneelideks! Ja see on vaid üks näide paljudest, mille avastame järgmises artiklis.
