I en tidligere artikkel så jeg på CSS Grids evne til å lage komplekse oppsett ved hjelp av auto-plasseringskreftene. Jeg tok det et skritt videre i en annen artikkel lagt til en zoomende sveveeffekt til bilder i et rutenettoppsett. Denne gangen vil jeg dykke ned i en annen type rutenett, en som fungerer med former.
Hva om bildene ikke er helt firkantede, men i stedet er formet som sekskanter eller romber? Spoilervarsel: vi kan gjøre det. Faktisk kommer vi til å kombinere CSS Grid-teknikker vi har sett på og slippe inn noen CSS clip-path og mask magi for å lage fancy rutenett av bilder for omtrent hvilken som helst form du kan forestille deg!
La oss starte med litt markering
De fleste av layoutene vi skal se på kan se enkle ut ved første øyekast, men den utfordrende delen er å oppnå dem med samme HTML-oppmerking. Vi kan bruke mange omslag, divs, og hva ikke, men målet med dette innlegget er å bruke den samme og minste mengden HTML-kode og fortsatt få alle de forskjellige rutenettene vi ønsker. Tross alt, hva er CSS annet enn en måte å skille styling og markering på? Vår styling bør ikke avhenge av markeringen, og omvendt.
Når det er sagt, la oss starte med dette:
<div class="gallery">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<img src="..." alt="...">
<!-- as many times as we want -->
</div>En beholder med bilder er alt vi trenger her. Ikke noe mer!
CSS Grid of Hexagons
Dette blir også noen ganger referert til som et "honeycomb" rutenett.
Det er allerede mange andre blogginnlegg der ute som viser hvordan du lager dette. Pokker, jeg skrev en her på CSS-Tricks! Den artikkelen er fortsatt god og går langt i å lage en responsiv layout. Men for dette spesifikke tilfellet kommer vi til å stole på en mye enklere CSS-tilnærming.
Først, la oss bruke clip-path på bildene for å lage den sekskantede formen, og vi plasserer dem alle i samme rutenettområde slik at de overlapper hverandre.
.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%)Ikke noe fancy ennå. Alle bildene er sekskanter og over hverandre. Så det ser ut som alt vi har er et enkelt sekskantformet bildeelement, men det er egentlig syv.
Det neste trinnet er å bruke en oversettelse til bildene for å plassere dem riktig på rutenettet.
Legg merke til at vi fortsatt vil at ett av bildene skal forbli i sentrum. Resten plasseres rundt den ved hjelp av CSS translate og god gammeldags geometri. Her er de falske formlene jeg kom opp med for hvert bilde i rutenettet:
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))Noen få beregninger og optimalisering senere (la oss hoppe over den kjedelige delen, ikke sant?) får vi følgende 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)); }Kanskje det blir lettere når vi får det ekte trigonometrifunksjoner i CSS!
Hvert bilde er oversatt av --_x og --_y variabler som er basert på disse formlene. Bare det andre bildet (nth-child(2)) er udefinert i en hvilken som helst velger fordi det er den i midten. Det kan være et hvilket som helst bilde hvis du bestemmer deg for å bruke en annen rekkefølge. Her er rekkefølgen jeg bruker:
Med bare noen få linjer med kode får vi et kult rutenett med bilder. Til dette la jeg en liten sveveeffekt til bildene for å gjøre ting mer avansert.
Gjett hva? Vi kan få et annet sekskantnett ved ganske enkelt å oppdatere noen få verdier.
Hvis du sjekker koden og sammenligner den med den forrige, vil du legge merke til at jeg ganske enkelt har byttet verdiene inni clip-path og jeg byttet mellom --x og --y. Det er alt!
CSS Grid of Rhombuses
Rombe er et så fancy ord for en firkant som er rotert 45 grader.
Samme HTML, husker du? Vi starter først med å definere et 2×2 rutenett med bilder i 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;
}Det første som kan fange blikket ditt er grid eiendom. Det er ganske uvanlig brukt, men er veldig nyttig ved at det er en stenografi som lar deg definere et komplett rutenett i en erklæring. Det er ikke den mest intuitive - og for ikke å nevne lesbare - eiendommen, men vi er her for å lære og oppdage nye ting, så la oss bruke det i stedet for å skrive ut alle de individuelle rutenettegenskapene.
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);Dette definerer to kolonner lik --s variabel og setter høyden på alle radene til --s også. Siden vi har fire bilder, vil vi automatisk få et 2×2 rutenett.
Her er en annen måte vi kunne ha skrevet det på:
grid-template-columns: repeat(2, var(--s));
grid-template-rows: repeat(2, var(--s));…som kan reduseres med grid stenografi:
grid: repeat(2,var(--s)) / repeat(2,var(--s));Etter å ha satt rutenettet, roterer vi det og bildene med CSS transforms og vi får dette:
Legg merke til hvordan jeg roterer dem begge med 45deg, men i motsatt retning.
.gallery {
/* etc. */
transform: rotate(45deg);
}
.gallery > img {
/* etc. */
transform: rotate(-45deg);
}Rotering av bildene i negativ retning forhindrer at de blir rotert med rutenettet slik at de holder seg rette. Nå bruker vi en clip-path å klippe en rombeform ut av dem.
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%)Vi er nesten ferdige! Vi må rette opp størrelsen på bildet for å få dem til å passe sammen. Ellers er de plassert langt fra hverandre til et punkt hvor det ikke ser ut som et rutenett med bilder.
Bildet er innenfor grensen til den grønne sirkelen, som er den innskrevne sirkelen til rutenettområdet der bildet er plassert. Det vi ønsker er å gjøre bildet større for å passe inn i den røde sirkelen, som er den omskrevne sirkelen til rutenettområdet.
Ikke bekymre deg, jeg vil ikke introdusere mer kjedelig geometri. Alt du trenger å vite er at forholdet mellom radiusen til hver sirkel er kvadratroten av 2 (sqrt(2)). Dette er verdien vi trenger for å øke størrelsen på bildene våre for å fylle området. Vi vil bruke 100%*sqrt(2) = 141% og bli ferdig!
.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%);
}I likhet med det sekskantede rutenettet kan vi gjøre ting mer avansert med den fine zoomende sveveeffekten:
CSS-rutenett med trekantede former
Du vet sikkert nå at det store trikset er å finne ut clip-path for å få de formene vi ønsker. For dette rutenettet har hvert element sitt eget clip-path verdi mens de to siste rutenettene fungerte med en konsistent form. Så denne gangen er det som om vi jobber med noen forskjellige trekantede former som kommer sammen for å danne et rektangulært rutenett av bilder.
Vi plasserer dem i et 3×2 rutenett med følgende 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%); } }Her er hva vi får:
Den siste touchen er å gjøre bredden på midtsøylen lik 0 for å bli kvitt mellomrommene mellom bildene. Den samme typen avstandsproblem som vi hadde med rombegitteret, men med en annen tilnærming for formene vi bruker:
grid-template-columns: auto 0 auto;Jeg måtte fikle med clip-path verdier for å sikre at de alle ser ut til å passe sammen som et puslespill. De originale bildene overlapper hverandre når den midterste kolonnen har null bredde, men etter å ha kuttet bildene er illusjonen perfekt:
CSS Pizza Pai Grid
Gjett hva? Vi kan få et annet kult rutenett ved å legge til border-radius og overflow til våre rutenett eller trekantede former. 🎉
CSS-rutenett med puslespillbrikker
Denne gangen skal vi leke med CSS mask egenskap for å få bildene til å se ut som biter av et puslespill.
Hvis du ikke har brukt mask med CSS-graderinger, Jeg anbefaler på det sterkeste denne andre artikkelen Jeg skrev om emnet fordi det vil hjelpe med det som kommer videre. Hvorfor gradienter? For det er det vi bruker for å få de runde hakkene i puslespillbrikkeformene.
Å sette opp rutenettet bør være en enkel sak nå, så la oss fokusere i stedet på mask del.
Som illustrert i demoen ovenfor, trenger vi to gradienter for å lage den endelige formen. Den ene gradienten lager en sirkel (den grønne delen) og den andre lager den riktige kurven mens du fyller ut den øverste delen.
--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;To variabler styrer formen. De --g variabel er ingenting annet enn rutenettgapet. Vi må ta hensyn til gapet for å plassere sirklene våre riktig slik at de overlapper perfekt når hele puslespillet er satt sammen. De --r variabel kontrollerer størrelsen på sirkulære deler av puslespillet.
Nå tar vi den samme CSS og oppdaterer noen få verdier i den for å lage de tre andre formene:
Vi har formene, men ikke de overlappende kantene vi trenger for å få dem til å passe sammen. Hvert bilde er begrenset til rutenettcellen det er i, så det er fornuftig hvorfor formene er litt rotete for øyeblikket:
Vi må skape et overløp ved å øke høyden/bredden på bildene. Fra figuren ovenfor må vi øke høyden på det første og det fjerde bildet mens vi øker bredden på det andre og tredje. Du har sikkert allerede gjettet at vi må øke dem ved å bruke --r variabel.
.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));
}Vi nærmer oss!
Vi opprettet overlappingen, men som standard overlapper bildene våre enten til høyre (hvis vi øker bredden) eller bunnen (hvis vi øker høyden). Men det er ikke det vi ønsker for det andre og fjerde bildet. Løsningen er å bruke place-self: end på de to bildene og hele koden vår blir denne:
Her er et annet eksempel hvor jeg bruker en konisk gradient i stedet for en radiell gradient. Dette gir oss trekantede puslespillbrikker samtidig som vi beholder den samme underliggende HTML og CSS.
En siste en! Denne gangen bruker jeg clip-path og siden det er en egenskap vi kan animere, får vi en kul sveve ved ganske enkelt å oppdatere den egendefinerte egenskapen som kontrollerer formen.
Innpakning opp
Det var alt for denne første delen! Ved å kombinere tingene vi allerede har lært om CSS Grid med noen tillegg clip-path og mask magi, var vi i stand til å lage rutenettoppsett med forskjellige typer former. Og vi brukte den samme HTML-koden hver gang! Og selve markeringen er ikke mer enn en beholder med en håndfull bildeelementer!
I den andre delen skal vi utforske mer komplekst utseende rutenett med mer fancy former og sveveeffekter.
Jeg planlegger å ta demoen av utvidede bildepaneler vi laget sammen i denne andre artikkelen:
…og forvandle det til et sikk-sakk bildepanel! Og dette er bare ett eksempel blant de mange vi vil oppdage i neste artikkel.
