Slice en Dice een Disc met CSS

0
42

Laatst kwam ik een interessant gesneden schijf ontwerp. De schijf had een diagonale verloop en werd opgesplitst in horizontale segmenten, offset een beetje van links naar rechts. Natuurlijk begon ik te denken wat zou de meest efficiënte manier van doen met CSS worden.

Gesneden verloop schijf.

De eerste gedachte was dat dit moet worden goed te doen met border-radius, toch? Nou, nee! Het ding met border-radius is dat het zorgt voor een elliptische hoek waarvan de uiteinden zijn de raaklijn aan de randen van het joins.

Mijn tweede gedachte was om het gebruik van een cirkel() clipping path. Goed, blijkt deze oplossing werkt als een zonnetje, dus laten we eens een korte blik op!

Merk op dat de volgende demo ‘ s werken niet in Edge Edge biedt nog geen ondersteuning voor clip-pad op HTML-elementen. Het kan allemaal worden geëmuleerd met geneste elementen met overflow: hidden in om cross-browser ondersteuning, maar voor de eenvoud, we ontleden de clip-pad-methode in dit artikel.

Het snijden van een disc in gelijke delen

Zo ver als de HTML-structuur gaat, genereren we het met een preprocessor om herhaling te voorkomen. Ten eerste, we beslissen een aantal plakjes n. Dan geven we dit aantal de CSS als een aangepaste eigenschap –n. Eindelijk, we genereren van de segmenten in een lus, het passeren van de index van elk van de CSS als een andere, aangepaste woning –ik.

– var n = 8;

stijl :root { –n: #{n} }

– for(var i = 0; i < n; i++)
.segment(style=`–ik: ${i}`)

Het bewegen op de CSS, moeten we eerst beslissen op een diameter $d voor onze schijf. Dit is de breedte van onze segmenten. De hoogte is de diameter gedeeld door het aantal items calc(#{$d}/var(–n)).

Om te kunnen om ze uit elkaar te houden, geven we ons plakjes dummy achtergronden bepaald door de pariteit.

$d: 20em;

.snijd {
–parity: 0;
breedte: $d;
hoogte: calc(#{$d}/var(–n));
achtergrond: de hsl(36, calc(var(–parity)*100%), calc(80% – var(–parity)*30%));

en:nth-of-type(2n) { –pariteit: 1 }
}

Ook hebben We de positie van onze segmenten in het midden met een kolom flex-lay-out op hun container (het lichaam in ons geval).

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Om de disc-vorm gebruiken we een cirkel() clipping pad met de straal van $r gelijk aan de helft van de diameter .5*$d en het centrale punt dode in het midden van de vergadering. Sinds we deze clip-pad op de segmenten, de positie van het centrale punt voor elk segment is ten opzichte van het schijfje zelf.

Horizontaal, het is altijd in het midden, op 50% van het segment. Verticaal is, moet deze in het midden van de vergadering, dus dat is waar het totale aantal items en de item-index die we hebben doorgegeven als CSS variabelen uit de preprocessor code in het spel komen.

In het midden van de vergadering betekent dat bij de helft van de hoogte van de montage van de top van de vergadering. De helft van de hoogte van de vergadering is de helft van de diameter .5*$d, die gelijk is aan de straal van $r. Maar deze waarde is ten opzichte van de gehele vergadering, en moeten we dat in vergelijking met het huidige segment. Om dit mogelijk te maken, trek de verticale positie van de huidige segment in vergelijking met de montage, dat is, hoe ver de bovenkant van het huidige segment is ten opzichte van de top van de vergadering.

De eerste slice (van index –i: 0) is op de top van de vergadering, zodat het bedrag aftrekken in dit geval is 0.

De tweede slice (van index –ik: 1) is op een sneetje hoogte van de bovenkant van de vergadering (de ruimte bezet door de eerste slice), dus het bedrag aftrekken in dit geval is 1 sneetje hoogten.

Het derde segment (van index –i: 2) is op twee slice hoogte van de top van de vergadering (de ruimte bezet door de eerste en tweede plakjes), dus het bedrag aftrekken in dit geval is 2 slice hoogten.

In het algemene geval, het bedrag aftrekken voor elk segment is het segment van de index (–i) vermenigvuldigd met een sneetje hoogte.

–h: calc(#{d}/var(–n)); /* segment hoogte */
clip-pad: de cirkel($r op 50% calc(#{$r} – var(–i)*var(–h))

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Na dit te doen, we kunnen het compenseren van de segmenten op basis van pariteit.

–teken: calc(1 – 2*var(–parity));
transformeren: translate(calc(var (- teken)*2%))

We hebben ons gesneden schijf!

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Afstand uit de segmenten

De eerste gedachte die opkomt hier is het gebruik van een marge op elk segment.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Dit kan een goed resultaat in sommige gevallen, maar wat als we niet willen dat onze disc langgerekte?

Goed, we hebben de optie van het beperken van de achtergrond naar de inhoud-box en het toevoegen van een verticale bekleding:

box-sizing: border-box;
padding: .125em 0;
achtergrond: de hsl(36, calc(var(–parity)*100%), calc(80% – var(–parity)*30%))
content-box;

Natuurlijk, in dit geval, moeten we ervoor zorgen box-sizing is ingesteld op border-box zodat de verticale bekleding niet toevoegen aan de hoogte.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

De één klein probleem in dit geval is dat het ook snijdt de bovenkant van de eerste slice en de onderkant van de laatste slice. Dit is misschien niet een probleem in sommige gevallen en we kunnen altijd opnieuw de padding-top :first-of-type en de padding-bottom op :last-van-type 0:

.snijd {
/* stijlen */
padding: .125em 0;

en:first-of-type { padding-top: 0 }
en:last-van-type { padding-bottom: 0 }
}

Echter, we hebben ook een one-line oplossing voor dit probleem van het creëren van openingen tussen de segmenten: voeg een masker op de container!

Dit masker is een herhalend-linear-gradient (), die zorgt voor transparante strepen van de dikte van de kloof $g, herhaalt zich na een slice hoogte en is beperkt tot de schijf diameter $d horizontaal en naar de schijf diameter $d minus een kloof $g verticaal (zodat we geen masker uit de top en de bodem als we ook deden in eerste instantie met de vulling aanpak).

masker: herhalen-linear-gradient(rood 0 rood calc(var(–h) – #{$g}),
transparant 0, transparant var(–h))
50% calc(50% – #{.5*$g})/ #{$d} calc(#{$d} – #{$g})

Merk op dat in dit geval moeten we het segment hoogte variabele –h op de container we gebruiken het voor het masker.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Continue achtergrond

Om een continue achtergrond, we moeten deze achtergrond een hoogte gelijk aan die van de disc en de verticale positie ten opzichte van elk segment zodanig dat het begint altijd bij de top van de montage… waar dat ook mag zijn gelegen ten opzichte van het segment.

De top van de eerste slice (van index –i: 0) samenvalt met die van de vergadering, zodat onze achtergrond begint vanaf 0 verticaal.

De top van de tweede slice (van index –ik: 1) is 1 sneetje hoogte onder die van de vergadering, zodat de achtergrond begint vanaf 1 sneetje hoogte boven verticaal. Sinds de positieve richting van de y-as naar beneden, dit betekent dat onze background-position langs de y-as is calc(-1*var(–h)) in dit geval.

De top van de derde segment (van index –i: 2) is 2 slice hoogten onder die van de vergadering, zodat de achtergrond is vanaf 2 slice hoogten boven verticaal. Dit maakt onze background-position langs de y-as is calc(-2*var(–h).

We merken een patroon hier: in het algemeen, de background-position langs de y-as van een segment is calc(-1*var(–i)*var(–h).

achtergrond:
linear-gradient(#eccc05, #c26e4c, #a63959, #4e2255, #333f3d)

/* background-position */
50% calc(-1*var(–i)*var(–h))/

100% $d /* background-size */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Maar als we willen dat een van links naar rechts verloop, dan is onze achtergrond is niet continu meer, iets dat wordt pas echt duidelijk als we tevens de eindstand een beetje om abrupte veranderingen:

background: linear-gradient(90deg,
#eccc05 33%, #c26e4c 0, #a63959 67%, #4e2255 0, #333f3d)

/* background-position */
50% calc(-1*var(–i)*var(–h))/

100% $d /* background-size */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Om dit probleem op te lossen, stellen we de offset als een Sass variabele $o, de horizontale achtergrond-grootte van het segment breedte (100% of $d) plus tweemaal de offset en zorg ervoor dat we bevestig de achtergrond voor de segmenten die te verplaatsen naar de linkerkant (in de negatieve richting van de x-as, dus door -$o) aan de linkerkant van het segment (achtergrond-positie langs de x-as is 0%) en voor de segmenten verplaatsen naar rechts (in de positieve richting van de x-as, dus met $o) aan de rechterkant van het segment (achtergrond-positie langs de x-as is 100%).

$o: 2%;
transformeren: translate(calc(var (- teken)*#{$o}));
background: linear-gradient(90deg,
#eccc05 33%, #c26e4c 0, #a63959 67%, #4e2255 0, #333f3d)

/* background-position */
calc – ((1 – var(–parity))*100%) calc(-1*var(–i)*var(–h))/

calc(100% + #{2*$o}) $d /* background-size */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Dit werkt voor gradiënten in elke hoek, zoals kan worden gezien in de interactieve demo hieronder en sleep om te veranderen van de hellingshoek:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Het werkt ook voor de beelden, maar in dit geval moeten we verwijderen de tweede background-size waarde, zodat het beeld niet wordt vervormd, dat laat ons achter met de waarschuwing van het krijgen van verticale herhaling als het beeld van de aspect ratio is groter dan calc(#{$d} + #{2*$o}) : #{$d}. Dit is niet het geval voor de vierkante afbeelding gebruiken we hieronder, maar het is toch iets om in gedachten te houden.

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Een ander ding om op te merken is dat boven de bovenkant van de afbeelding aan de bovenkant van de vergadering. Als we willen dat het midden van de afbeelding om te worden bevestigd aan het midden van de vergadering, we moeten tweaken van de verticale component van de achtergrond-positie een beetje.

Ten eerste, bevestig het midden van het beeld tot het midden van een segment, maken we gebruik van een background-position waarde van 50%. Maar we willen niet het midden van het beeld in het midden van elk plakje, willen we het in het midden van de vergadering voor alle segmenten. We weten al dat de afstand van de bovenkant van elk segment naar het verticale middelpunt van de gehele vergadering, dat is de y-coördinaat van de clipping cirkel met het centrale punt:

–y: calc(#{$r} – var(–i)*var(–h));
clip-pad: de cirkel($r op 50% var(–y))

De afstand van het verticale middelpunt van elk segment naar die van de vergadering is deze waarde –y minus de helft van een plakje hoogte. Dus het resultaat is dat de achtergrond-positie moeten we langs de y-as in het verticale midden van de afbeelding is gekoppeld aan die van de vergadering is de calc(50% + var(–y) – .5*var(–h).

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Incrementele plakjes

Dit betekent dat de plakjes niet de hoogte niet meer. Bijvoorbeeld, de eerste zou men een unit hoogte, de tweede twee keer deze hoogte, de derde drie keer deze hoogte en ga zo maar door…

De toegevoegde hoogte van al deze segmenten dient gelijk te zijn aan de schijf diameter. In andere woorden, we moeten de volgende gelijkheid:

h + 2*h + 3*h + … + n*h = d

Dit kan ook worden geschreven als:

h*(1 + 2 + 3 + … + n) = d

dat maakt het makkelijker om op te merken iets! Binnen de haakjes, hebben we de som van de eerste n natuurlijke getallen, die altijd n*(n + 1)/2!

Dus onze gelijkheid wordt:

h*n*(n + 1)/2 = d

Dit stelt ons in staat om de hoogte van de unit h:

h = 2*d/n/(n + 1)

Wanneer we dit toepassen op onze demo, we hebben:

–h: calc(#{2*$d}/var (- n)/(var (- n) + 1));
hoogte: calc((var(–i) + 1)*var(–h));

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Net als in het geval van gelijke plakjes, de y-coördinaat van het middelpunt van de cirkel knippen() is de schijf straal $r minus de afstand van de bovenkant van de vergadering naar de top van de huidige segment. Dit is de som van de hoogten van alle vorige plakjes.

In het geval van de eerste slice (–i: 0), we hebben geen vorige segment, zodat dit bedrag is 0.

In het geval van de tweede slice (–i: 1), we hebben alleen het eerste segment voor en de hoogte is de hoogte van de unit (–h).

In het geval van de derde segment (–i: 2), de som wij willen is dat tussen de hoogte van het eerste deel, dat gelijk is aan de hoogte van de unit en die van het tweede deel, dat is tweemaal de hoogte van de unit. Dat is calc(var(–h) + 2*var(–h)) of calc(var(–h)*(1 + 2)).

In het geval van de derde segment (–i: 3), de som is dat tussen de hoogte van het eerste deel, dat gelijk is aan de hoogte van de unit, die van het tweede deel, dat is tweemaal de hoogte van de unit en die van het derde deel, dat is drie keer de hoogte van de unit. Dat is calc(var(–h) + 2*var(–h) + 3*var(–h)) of calc(var (h–)*(1 + 2 + 3)).

Nu zien we een patroon te voorschijn! Voor elk segment van de index –ik, hebben we dat de toegevoegde hoogte van haar vorige segmenten is de hoogte van de unit –h maal de som van de eerste –i natuurlijke getallen (en de som van de eerste –i natuurlijke getallen is calc(var(–i)*(var(–i) + 1)/2)). Dit betekent dat onze clip-pad-waarde wordt:

cirkel($r op 50% calc(var(–h)*var(–i)*(var(–i) + 1)/2))

Voegen We de verschuiving weer in en hebben we het volgende resultaat:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Helaas, het hebben van incrementele plakjes betekent het herhalen-linear-gradient() masker methode van het maken van gaten niet meer werken. Wat nog steeds werkt echter alleen goed is de verticale padding-methode en wij kunnen de vulling waarden zoals die in de bovenste 0 voor de eerste slice en de onderste is 0 voor de laatste slice.

vulling:
calc(var(–i)*#{$g}/var(–n)) /* top */
0 /* laterale */
calc((var (- n) – 1 – var(–i))*#{$g}/var(–n)) /* onder */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor een gradient achtergrond, het belangrijkste idee blijft hetzelfde als in het geval van de gelijke plakjes. Er zijn slechts twee dingen die we moeten rekening houden.

De ene, de background-position langs de y-as is verminderd met de afstand (in absolute waarde) tussen de top van de vergadering en de top van de huidige segment. Deze afstand is niet calc(var(–i)*var(–h)), zoals in het geval van gelijke plakjes hoogte –h meer. In plaats daarvan is het, zoals berekend wat eerder, calc(var(–i)*(var(–i) + 1)/2*var(–h). Dus de background-position langs de y-as is calc(-1*var(–i)*(var(–i) + 1)/2*var(–h).

En twee, we willen onze achtergrond geklemd om de content-box zodat we houden in de gaten, maar we moeten zorgen dat de achtergrond is van oorsprong naar de oorspronkelijke waarde van de padding-box zodat onze gradiënt blijft continu.

achtergrond:
linear-gradient(var (–),
#eccc05, #c26e4c, #a63959, #4e2255, #333f3d)

/* background-position */
calc – ((1 – var(–parity))*100%) /* x component */
calc(-1*var(–i)*(var(–i) + 1)/2*var(–h)) /* y-component */ /

/* background-size */
calc(100% + #{2*$o}) $d

padding-box /* achtergrond-oorsprong */
content-box /* background-clip */;

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor een achtergrond van een afbeelding waarvan het middelpunt wordt bevestigd aan het midden van onze gemeente, moeten we rekening houden met het feit dat de helft van een plakje hoogte niet dezelfde waarde voor alle segmenten meer. Nu de hoogte van een segment is calc((var(–i) + 1)*var(–h)), dus dit is de waarde die we nodig hebben om af te trekken in de formule voor de y-component van de background-position.

–y: calc(#{$r} – .5*var(–i)*(var(–i) + 1)*var(–h));
achtergrond:
url(/amur_leopard.jpg)

/* background-position */
calc – ((1 – var(–parity))*100%) /* x component */
calc(50% + var(–y) – .5*(var(–i) + 1)*var(–h)) /* y-component */ /

/* background-size */
calc(100% + #{2*$o})

padding-box /* achtergrond-oorsprong */
content-box /* background-clip */;
clip-pad: de cirkel($r op 50% var(–y));

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Verticale segmenten

We kunnen ook slice onze disc langs de andere richting. Dit betekent het verwijderen van de flex-richting: kolom verklaring van de container en de verhuur van de flex-richting worden de eerste een (rij), schakelen de breedte en de hoogte van de x-en y-coördinaten van de ronde uitknippad het centrale punt, de richting waarin we een verschuiving van de segmenten, de afmetingen en de x-en y-posities van de masking gradiënt, die we ook nodig hebben om te draaien, zodat het gaat langs de x-as.

body {
/* hetzelfde als voorheen */
–w: calc(#{$d}/var(–n));
masker: herhalen-linear-gradient(90deg,
rood 0 rood calc(var(–w) – #{$g}),
transparant 0, transparant var(–w))
calc(50% – #{.5*$g}) 50% / calc(#{$d} – #{$g}) #{$d}
}

.snijd {
/* hetzelfde als voorheen */
breedte: var(–w); hoogte: $d;
transformeren: translatey(calc(var (- teken)*2%));
achtergrond: de hsl(36, calc(var(–parity)*100%), calc(80% – var(–parity)*30%));
clip-pad: de cirkel($r in calc(#{$r} – var(–i)*var(–w)) 50%)
}

Dit geeft ons gelijk verticale segmenten met wisselende achtergronden:

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor het verloop geval, we moeten ook omgekeerd de achtergrond twee dimensies en de achtergrond posities langs de x-en y-assen:

achtergrond:
linear-gradient(135deg,
#eccc05 15%, #c26e4c, #a63959, #4e2255, #333f3d 85%)

/* background-position */
calc(-1*var(–i)*var(–w)) calc((1 – var(–parity))*100%)/

#{$d} calc(100% + #{2*$o}) /* background-size */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor incrementele plakjes, combineren we de incrementele geval met de verticale geval, wat betekent dat het omwisselen van de waarden die we hebben voor de eerdere incrementele geval langs de twee assen:

–w: calc(#{2*$d}/var (- n)/(var (- n) + 1));
breedte: calc((var(–i) + 1)*var(–w)); hoogte: $d;
clip-pad: de cirkel($r in calc(#{$r} – .5*var(–i)*(var(–i) + 1)*var(–w)) 50%);

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor het maken van de gaten, we maken gebruik van de padding-methode. Maar omdat we nu in de verticale geval moeten we horizontale stofferingen, links en rechts) en zorg ervoor dat de padding-left voor de eerste slice is 0 en de padding-right voor de laatste segment is ook 0:

box-sizing: border-box;
vulling:
0 /* top */
calc((var (- n) – 1 – var(–i))*#{$g}/var(–n)) /* rechts */
0 /* onder */
calc(var(–i)*#{$g}/var(–n)) /* links */;
achtergrond:
hsl(36, calc(var(–parity)*100%), calc(80% – var(–parity)*30%))
inhoud doos

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Ten slotte, hebben wij het verloop geval:

achtergrond:
linear-gradient(135deg,
#eccc05 15%, #c26e4c, #a63959, #4e2255, #333f3d 85%)

/* background-position */
calc(-.5*var(–i)*(var(–i) + 1)*var(–w)) /* x component */
calc – ((1 – var(–parity))*100%) /* y-component */ /

/* background-size */
#{$d} calc(100% + #{2*$o})

padding-box /* achtergrond-oorsprong */
content-box /* background-clip */;

Zie de Pen door thebabydino (@thebabydino) op CodePen.

2D-geval

Nogmaals, we genereren met een beetje Pug, het totale aantal items, het product tussen het aantal kolommen en het aantal rijen. Voor de eenvoud houden we het aantal rijen en het aantal kolommen gelijk.

– var n = 8 m = Wiskunde.pow(n, 2);

stijl :root { –n: #{n}; –i: 0; –j: 0 }
– for(var i = 1; i < n; i++) {
| .tegel:nth-of-type(#{n}n + #{i + 1}) { –i: #{i} }
| .tegel:nth-of-type(n + #{n*i + 1}) { –j: #{i} }
– }
– for(var i = 0; i < m; i++)
.tegel

We gingen ook naar de kolom-en rij-indexcijfers (–i –j respectievelijk) om de CSS.

Aangezien we in de 2D-geval, we overschakelen van het gebruik van een 1D-indeling (flex) om met behulp van een 2D een (raster). We beginnen ook met de schijf diameter $d en, gezien het aantal kolommen is gelijk aan dat van rijen (- n), onze cd wordt verdeeld in identieke tegels van de rand van de lengte: l: calc(#{$d}/var(–n)).

$d: 20em;

body {
–l: calc(#{$d}/var(–n));
display: grid;
plaats-inhoud: center;
grid-sjabloon: herhaal(var (- n), var(–l))/ herhaal(var (- n), var(–l))
}

Voor het maken van de gaten tussen de tegels, die we gebruiken voor de opvulling aanpak op .tegel elementen en combineer de horizontale en verticale gevallen zo dat we de padding-top voor de eerste rij 0 is, is de padding-left voor de eerste kolom is 0, de padding-bottom voor de laatste rij is 0 en de padding-right voor de laatste kolom is 0.

vulling:
calc(var(–j)*#{$g}/var(–n)) /* top */
calc((var (- n) – 1 – var(–i))*#{$g}/var(–n)) /* rechts */
calc((var (- n) – 1 – var(–j))*#{$g}/var(–n)) /* onder */
calc(var(–i)*#{$g}/var(–n)) /* links */

Merk op dat we hebben gebruikt, de rij-index –j voor de top naar beneden richting (verticale stofferingen) en de kolom-index –ik van links naar rechts richting (laterale stofferingen).

Om de disc-vorm, hebben we opnieuw het combineren van de horizontale en verticale gevallen, met behulp van de kolom index –ik de x-coördinaat van de ronde uitknippad het centrale punt en de rij-index –j om de y-coördinaat.

clip-pad:
cirkel($r in calc(#{$r} – var(–i)*var(–l))
calc(#{$r} – var(–j)*var(–l)))

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor een gradient achtergrond, het is weer de combinatie van de horizontale en de verticale gevallen en rekening houdend met dat het hier hebben we geen offset op dit moment, dat betekent dat de achtergrond van het formaat is de schijf diameter $d langs beide assen.

achtergrond:
linear-gradient(135deg,
#eccc05 15%, #c26e4c, #a63959, #4e2255, #333f3d 85%)

/* background-position */
calc(-1*var(–i)*var(–l))
calc(-1*var(–j)*var(–l)) /

#{$d} #{$d} /* background-size */
padding-box /* achtergrond-oorsprong */
content-box /* background-clip */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor een achtergrond van een afbeelding verwijderen we de tweede background-size waarde, zodat we voorkomen dat de afbeelding van het verkrijgen van gespannen als het niet plein. We hebben ook het aanpassen van de code voor de bevestiging van de afbeelding is het middelpunt van dat van het rooster van de 1D geval de 2D-geval:

–x: calc(#{$r} – var(–i)*var(–l));
–y: calc(#{$r} – var(–j)*var(–l));
background: url(/amur_leopard.jpg)

/* background-position */
calc(50% + var(–x) – .5*var(–l))
calc(50% + var(–y) – .5*var(–l)) /

#{$d} /* background-size */
padding-box /* achtergrond-oorsprong */
content-box /* background-clip */;
clip-pad: de cirkel($r at var(–x) var(–y))

Zie de Pen door thebabydino (@thebabydino) op CodePen.

In de incrementele geval, we hebben niet dezelfde afmetingen voor alle tegels, dus we gebruiken de automatische dimensionering voor raster-sjabloon:

body {
/* hetzelfde als voorheen */
grid-sjabloon: herhaal(var (- n), auto/ herhaal(var (- n), auto)
}

Net als in de 1D geval, we beginnen met het berekenen van een eenheid rand lengte: –u:

–u: calc(#{2*$d}/var (- n)/(var (- n) + 1))

Dan stellen We incrementele maatgegevens langs beide assen voor onze dakpan-elementen:

breedte: calc((var(–i) + 1)*var(–u));
hoogte: calc((var(–j) + 1)*var(–u))

We moeten ook passen de coördinaten van de clipping-cirkel centraal punt naar de incrementele geval:

clip-pad:
cirkel($r in calc(#{$r} – .5*var(–i)*(var(–i) + 1)*var(–u))
calc(#{$r} – .5*var(–j)*(var(–j) + 1)*var(–u)))

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Voor een gradient achtergrond, passen we de gelijke tegels versie om de incrementele geval. Dit betekent dat het tweaken van de achtergrond-positie zoals we eerder deed voor de incrementele plakjes, alleen deze keer doen we het langs beide assen, niet slechts langs één:

achtergrond:
linear-gradient(135deg,
#eccc05 15%, #c26e4c, #a63959, #4e2255, #333f3d 85%)

/* background-position */
calc(-.5*var(–i)*(var(–i) + 1)*var(–l))
calc(-.5*var(–j)*(var(–j) + 1)*var(–l)) /

#{$d} #{$d} /* background-size */
padding-box /* achtergrond-oorsprong */
content-box /* background-clip */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Ten slotte, hebben wij de achtergrond van een afbeelding optie voor de incrementele 2D-geval:

background: url(/amur_leopard.jpg)

/* background-position */
calc(50% + var(–x) – .5*(var(–i) + 1)*var(–u))
calc(50% + var(–y) – .5*(var(–j) + 1)*var(–u)) /

#{$d} /* background-size */
padding-box /* achtergrond-oorsprong */
content-box /* background-clip */

Zie de Pen door thebabydino (@thebabydino) op CodePen.

Waarschijnlijk zijn er meer variaties we ons kunnen bedenken, maar we zullen hier stoppen. Als u nog meer ideeën over hoe druk deze verder wil ik graag wat meer over hen horen!