Edellisessä artikkelissa tarkastelin CSS Gridin kykyä luoda monimutkaisia asetteluja käyttämällä automaattisen sijoittelun ominaisuuksia. Otin sen askeleen pidemmälle toisessa artikkelissa lisäsi zoomaavan hover-tehosteen kuviin ruudukkoasettelussa. Tällä kertaa haluan sukeltaa toisentyyppiseen ruudukkoon, joka toimii muotojen kanssa.
Entä jos kuvat eivät ole täysin neliömäisiä, vaan ne ovat kuusikulmioiden tai rompujen muotoisia? Spoilerivaroitus: voimme tehdä sen. Itse asiassa aiomme yhdistää CSS Grid -tekniikat, joita olemme tarkastelleet, ja pudotamme joihinkin CSS: iin clip-path ja mask taikuutta luodaksesi upeita kuvien ruudukoita lähes mihin tahansa muotoon, jonka voit kuvitella!
Aloitetaan merkinnöillä
Suurin osa asetteluista, joita aiomme tarkastella, saattaa näyttää ensi silmäyksellä helpolta toteuttaa, mutta haastava osa on saavuttaa ne sama HTML-merkintä. Voimme käyttää paljon kääreitä, divs, ja mitä muuta, mutta tämän viestin tavoitteena on käyttää samaa ja pienintä määrää HTML-koodia ja silti saada kaikki haluamasi ruudukot. Loppujen lopuksi, mitä CSS on muuta kuin tapa erottaa tyyli ja merkinnät? Tyylimme ei pitäisi riippua merkinnöistä ja päinvastoin.
Tämä sanoi, aloitetaan tästä:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>Täällä tarvitsemme vain säiliön kuvilla. Ei mitään muuta!
Kuusikulmioiden CSS-verkko
Tätä kutsutaan joskus myös "hunajakennoksi".
Siellä on jo paljon muita blogikirjoituksia, jotka osoittavat, kuinka tämä tehdään. Hitto, minä kirjoitti yhden täällä CSS-Tricksissä! Tämä artikkeli on edelleen hyvä ja menee hyvin syvälle reagoivan asettelun tekemiseen. Mutta tässä erityistapauksessa aiomme luottaa paljon yksinkertaisempaan CSS-lähestymistapaan.
Ensin käytetään clip-path kuviin kuusikulmiomuodon luomiseksi ja asetamme ne kaikki samalle ruudukkoalueelle niin, että ne menevät päällekkäin.
.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%)Ei vielä mitään hienoa. Kaikki kuvat ovat kuusikulmioita ja toistensa yläpuolella. Näyttää siis siltä, että meillä on vain yksi kuusikulmion muotoinen kuvaelementti, mutta niitä on todella seitsemän.
Seuraava vaihe on lisätä kuviin käännös niiden sijoittamiseksi oikein ruudukkoon.
Huomaa, että haluamme silti yhden kuvista pysyvän keskellä. Loput asetetaan sen ympärille CSS:n avulla translate ja hyvä vanhanaikainen geometria. Tässä ovat valekaavat, jotka keksin jokaiselle ruudukon kuvalle:
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))Muutama laskelma ja optimointi myöhemmin (ohitetaan se tylsä osa, eikö?) saamme seuraavan CSS: n:
.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)); }Ehkä se on helpompaa, kun pääsemme todellisia trigonometriafunktioita CSS:ssä!
Jokainen kuva on käännetty --_x ja --_y muuttujat, jotka perustuvat näihin kaavoihin. Vain toinen kuva (nth-child(2)) on määrittelemätön missään valitsimessa, koska se on keskellä. Se voi olla mikä tahansa kuva, jos päätät käyttää eri järjestystä. Tässä on käyttämäni järjestys:
Vain muutaman rivin koodilla saamme viileän kuvaruudukon. Tähän lisäsin kuviin hieman hover-tehostetta tehdäkseni asioista hienompaa.
Arvaa mitä? Voimme saada toisen kuusikulmaisen ruudukon yksinkertaisesti päivittämällä muutamia arvoja.
Jos tarkistat koodin ja vertaat sitä edelliseen, huomaat, että olen yksinkertaisesti vaihtanut arvot sisällä clip-path ja vaihdoin välillä --x ja --y. Siinä kaikki!
Rombusten CSS-ruudukko
Rombi on niin hieno sana neliölle, joka on käännetty 45 astetta.
Sama HTML, muistatko? Aloitamme määrittämällä 2 × 2 -kuvien ruudukon CSS:ssä:
.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;
}Ensimmäinen asia, joka saattaa pistää silmään, on grid omaisuutta. Sitä käytetään melko harvoin, mutta se on erittäin hyödyllinen, koska se on lyhenne, jonka avulla voit määrittää täydellisen ruudukon yhdessä ilmoituksessa. Se ei ole intuitiivisin – ja puhumattakaan luettava – ominaisuus, mutta olemme täällä sitä varten oppia ja löytää uusia asioita, joten käytetään sitä mieluummin kuin kirjoitettaisiin kaikki yksittäiset ruudukon ominaisuudet.
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);Tämä määrittää kaksi saraketta, jotka ovat yhtä suuret kuin --s muuttuja ja asettaa kaikkien rivien korkeudeksi --s yhtä hyvin. Koska meillä on neljä kuvaa, saamme automaattisesti 2 × 2 -ruudukon.
Tässä on toinen tapa, jolla olisimme voineet kirjoittaa sen:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…joita voidaan vähentää grid pikakirjoitus:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Ruudukon asettamisen jälkeen kierrämme sitä ja kuvia CSS:llä transforms ja saamme tämän:
Huomaa kuinka pyöritän niitä molempia 45deg, mutta päinvastaiseen suuntaan.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Kuvien kääntäminen negatiiviseen suuntaan estää niitä kiertymästä ruudukon mukana, jolloin ne pysyvät suorina. Nyt käytämme a clip-path leikata niistä rombin muotoinen.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Olemme melkein valmiita! Meidän on korjattava kuvan kokoa, jotta ne sopivat yhteen. Muuten ne ovat kaukana toisistaan niin kaukana toisistaan, että ne eivät näytä kuvien ruudukolta.
Kuva on vihreän ympyrän rajoissa, joka on sen ruudukkoalueen piirretty ympyrä, johon kuva on sijoitettu. Haluamme tehdä kuvasta isomman, jotta se mahtuu punaisen ympyrän sisään, joka on ruudukkoalueen rajattu ympyrä.
Älä huoli, en aio esitellä tylsempää geometriaa. Sinun tarvitsee vain tietää, että kunkin ympyrän säteen välinen suhde on luvun 2 (sqrt(2)). Tämä on arvo, jota tarvitsemme lisätäksemme kuviemme kokoa täyttääksemme alueen. Me käytämme 100%*sqrt(2) = 141% ja tehty!
.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%);
}Kuten kuusikulmioruudukko, voimme tehdä asioista hienostuneempia tällä hienolla zoomaushover-efektillä:
Kolmiomaisten muotojen CSS-ruudukko
Luultavasti tiedät jo, että suuri temppu on selvittää clip-path saadaksemme haluamamme muodot. Tässä ruudukossa jokaisella elementillä on omansa clip-path arvo, kun taas kaksi viimeistä ruudukkoa toimivat yhtenäisellä muodolla. Joten tällä kertaa on kuin työskentelemme muutamien erilaisten kolmiomuotojen kanssa, jotka muodostavat yhdessä suorakaiteen muotoisen kuvien ruudukon.
Sijoitamme ne 3 × 2 -ruudukkoon, jossa on seuraava 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%); } }Tässä on mitä saamme:
Viimeinen silaus on tehdä keskimmäisen sarakkeen leveydestä yhtä suuri 0 päästäksesi eroon kuvien välisistä tiloista. Samanlainen etäisyysongelma meillä oli rombiruudukossa, mutta erilainen lähestymistapa käyttämiimme muotoihin:
grid-template-columns: auto 0 auto;Minun täytyi puuhailla clip-path arvot varmistaaksesi, että ne kaikki näyttävät sopivan hyvin yhteen kuin palapeli. Alkuperäiset kuvat menevät päällekkäin, kun keskisarakkeen leveys on nolla, mutta kuvien leikkaamisen jälkeen illuusio on täydellinen:
CSS Pizza Pie Grid
Arvaa mitä? Voimme saada toisen viileän ruudukon yksinkertaisesti lisäämällä border-radius ja overflow verkkoon tai kolmion muotoihin. 🎉
CSS-ruudukko palapelin palasista
Tällä kertaa aiomme pelata CSS:llä mask ominaisuus saada kuvat näyttämään palapelin palasilta.
Jos et ole käyttänyt sitä mask with CSS-gradientit, Suosittelen lämpimästi tämä toinen artikkeli Kirjoitin aiheesta, koska se auttaa tulevassa. Miksi gradientit? Koska sitä käytämme saadaksemme pyöreät lovet palapelin kappaleiden muotoihin.
Ruudukon asettamisen pitäisi olla jo vaivatonta, joten keskitytään sen sijaan mask osa.
Kuten yllä olevassa demossa havainnollistetaan, tarvitsemme kaksi kaltevuutta lopullisen muodon luomiseksi. Toinen kaltevuus luo ympyrän (vihreä osa) ja toinen oikean käyrän samalla kun se täyttää yläosan.
--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;Kaksi muuttujaa ohjaa muotoa. The --g muuttuja ei ole muuta kuin ruudukon aukko. Meidän on otettava huomioon rako asettaaksemme ympyrät oikein, jotta ne menevät täydellisesti päällekkäin, kun koko palapeli on koottu. The --r muuttuja ohjaa palapelin muodon pyöreiden osien kokoa.
Nyt otamme saman CSS:n ja päivitämme siihen muutamia arvoja kolmen muun muodon luomiseksi:
Meillä on muodot, mutta ei päällekkäisiä reunoja, joita tarvitsemme, jotta ne sopivat yhteen. Jokainen kuva on rajoitettu ruudukon soluun, jossa se on, joten on järkevää, miksi muodot ovat tällä hetkellä tavallaan sekaisin:
Meidän on luotava ylivuoto lisäämällä kuvien korkeutta/leveyttä. Yllä olevasta kuvasta meidän on suurennettava ensimmäisen ja neljännen kuvan korkeutta ja lisättävä toisen ja kolmannen kuvan leveyttä. Olet luultavasti jo arvannut, että meidän on lisättävä niitä käyttämällä --r muuttuja.
.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));
}Olemme tulossa lähemmäksi!
Loimme päällekkäisyyden, mutta oletusarvoisesti kuvamme menevät joko oikealle (jos lisäämme leveyttä) tai alareunalle (jos lisäämme korkeutta). Mutta sitä emme halua toiselle ja neljännelle kuvalle. Korjaus on käytössä place-self: end näissä kahdessa kuvassa ja koko koodimme tulee seuraavaksi:
Tässä on toinen esimerkki, jossa käytän kartiogradienttia säteittäisen gradientin sijasta. Tämä antaa meille kolmion muotoisia palapelin palasia säilyttäen samalla taustalla olevan HTML:n ja CSS:n.
Viimeinen! Tällä kertaa käytän clip-path ja koska se on ominaisuus, jonka voimme animoida, saamme viileän leijumisen yksinkertaisesti päivittämällä mukautetun ominaisuuden, joka hallitsee muotoa.
Käärimistä
Siinä kaikki tälle ensimmäiselle osalle! Yhdistämällä CSS Gridistä jo oppimamme asiat joihinkin lisättyihin clip-path ja mask taikuutta, pystyimme tekemään ruudukkoasetteluja, joissa oli erilaisia muotoja. Ja käytimme joka kerta samaa HTML-merkintää! Ja itse merkintä ei ole muuta kuin säiliö, jossa on kourallinen kuvaelementtejä!
Toisessa osassa aiomme tutkia monimutkaisemman näköisiä ruudukoita, joissa on hienommat muodot ja leijuusefektit.
Aion ottaa demon yhdessä tekemiemme laajenevista kuvapaneeleista tämä toinen artikkeli:
…ja muuta se siksak-kuvapaneeleiksi! Ja tämä on vain yksi esimerkki monista, jotka löydämme seuraavassa artikkelissa.
