Nakladalniki enega elementa: gremo v 3D!

Za ta četrti in zadnji naš članek majhna serija nakladalnikov z enim elementom, bomo raziskovali 3D vzorce. Pri ustvarjanju 3D elementa si je težko predstavljati, da je samo en element HTML dovolj za simulacijo nečesa, kot je vseh šest ploskev kocke. Ampak morda se lahko izognemo z nečim bolj kockastim...kot namesto tega s prikazom samo sprednjih treh strani oblike — to je popolnoma mogoče in to bomo storili skupaj.

Nakladalnik deljenih kock

Tukaj je 3D nakladalnik, kjer je kocka razdeljena na dva dela, vendar je narejena samo z enim samim elementom:

Vsaka polovica kocke je narejena z psevdoelementom:

Kul, kajne?! S CSS lahko uporabimo stožčasti gradient clip-path na elementih ::before in ::after psevdo za simulacijo treh vidnih ploskev 3D kocke. Negativna marža je tisto, kar potegne dva psevda skupaj, da se prekrivata in simulirata polno kocko. Preostanek našega dela je predvsem animiranje teh dveh polovic, da dobimo čedne nakladalce!

Oglejmo si vizualni prikaz, ki pojasnjuje matematiko za točkami izrezne poti, uporabljene za ustvarjanje tega kocki podobnega elementa:

Imamo svoje spremenljivke in enačbo, zato jih uporabimo. Najprej bomo vzpostavili svoje spremenljivke in nastavili velikost za glavno .loader Element:

.loader { --s: 150px; /* control the size */ --_d: calc(0.353 * var(--s)); /* 0.353 = sin(45deg)/2 */ width: calc(var(--s) + var(--_d)); aspect-ratio: 1; display: flex;
}

Zaenkrat še nič preveč norega. Imamo 150px kvadrat, ki je nastavljen kot prilagodljiv vsebnik. Zdaj vzpostavimo naše psevdo:

.loader::before,
.loader::after { content: ""; flex: 1;
}

To sta dve polovici v .loader posoda. Moramo jih pobarvati, tako da je tam naš stožčasti gradient brcne v:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}

Gradient je tam, vendar izgleda čudno. Moramo pripnite na element:

.loader::before,
.loader::after { content: ""; flex: 1; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0); clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}

Poskrbimo, da se obe polovici prekrivata z a negativna marža:

.loader::before { margin-right: calc(var(--_d) / -2);
} .loader::after { margin-left: calc(var(--_d) / -2);
}

Zdaj pa jih spravimo k premikanju!

.loader::before,
.loader::after { /* same as before */ animation: load 1.5s infinite cubic-bezier(0, .5, .5, 1.8) alternate;
} .loader::after { /* same as before */ animation-delay: -.75s
} @keyframes load{ 0%, 40% { transform: translateY(calc(var(--s) / -4)) } 60%, 100% { transform: translateY(calc(var(--s) / 4)) }
}

Tukaj je še enkrat končni demo:

Nalagalnik kocke napredka

Uporabimo isto tehniko za ustvarjanje 3D nalagalnika napredka. Da, še vedno samo en element!

Kar zadeva simulacijo kocke, ne spreminjamo ničesar na enak način kot prej, razen spreminjanja višine in razmerja stranic nakladalnika. Animacija, ki jo izdelujemo, temelji na presenetljivo enostavni tehniki, pri kateri posodobimo širino leve strani, medtem ko desna stran zapolni preostali prostor, zahvaljujoč flex-grow: 1.

Prvi korak je, da desni strani dodate nekaj prosojnosti z uporabo opacity:

To simulira učinek, da je ena stran kocke napolnjena, medtem ko je druga prazna. Nato posodobimo barvo leve strani. Da bi to naredili, bodisi posodobimo tri barve znotraj stožčastega gradienta ali pa to naredimo tako, da dodamo barvo ozadja z background-blend-mode:

.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply;
}

Ta trik nam omogoča samo enkratno posodobitev barve. Desna stran nalagalnika se zlije s tremi odtenki bele iz stožčastega gradienta, da ustvari tri nove odtenke naše barve, čeprav uporabljamo samo eno barvno vrednost. Barvna prevara!

Animirajmo širino leve strani nakladalnika:

Ups, animacija je na začetku malo čudna! Ste opazili, kako se nekako začne zunaj kocke? To je zato, ker začnemo animacijo na 0% premer. Toda zaradi clip-path in negativno maržo, ki jo uporabljamo, moramo namesto tega začeti pri svojem --_d spremenljivko, ki smo jo uporabili za definiranje clip-path točke in negativna marža:

@keyframes load { 0%, 5% {width: var(--_d); } 95%, 100% {width: 100%; }
}

To je malo bolje:

Toda to animacijo lahko naredimo še bolj gladko. Ste opazili, da nam nekaj manjka? Naj vam pokažem posnetek zaslona za primerjavo, kako bi morala izgledati končna predstavitev s to zadnjo predstavitvijo:

To je spodnja stran kocke! Ker je drugi element prozoren, moramo videti spodnjo stran tega pravokotnika, kot lahko vidite v levem primeru. Je subtilen, vendar bi moral biti tam!

Glavnemu elementu lahko dodamo gradient in ga strižemo, kot smo naredili s psevdo:

background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat;

Tukaj je celotna koda, ko je vse skupaj sestavljeno:

.loader { --s: 100px; /* control the size */ --_d: calc(0.353*var(--s)); /* 0.353 = sin(45deg) / 2 */ height: var(--s); aspect-ratio: 3; display: flex; background: linear-gradient(#fff1 0 0) bottom / 100% var(--_d) no-repeat; clip-path: polygon(var(--_d) 0, 100% 0, 100% calc(100% - var(--_d)), calc(100% - var(--_d)) 100%, 0 100%, 0 var(--_d));
}
.loader::before,
.loader::after { content: ""; clip-path: inherit; background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), #fff 135deg, #666 0 270deg, #aaa 0);
}
.loader::before { background-color: #CC333F; /* control the color here */ background-blend-mode: multiply; margin-right: calc(var(--_d) / -2); animation: load 2.5s infinite linear;
}
.loader:after { flex: 1; margin-left: calc(var(--_d) / -2); opacity: 0.4;
} @keyframes load { 0%, 5% { width: var(--_d); } 95%, 100% { width: 100%; }
}

To je to! Pravkar smo uporabili pametno tehniko, ki uporablja psevdoelemente, stožčaste prelive, izrezovanje, mešanje ozadja in negativne robove, da bi dobili ne enega, ampak dva prikupni 3D nalagalniki z nič več kot enim samim elementom v oznaki.

Več 3D

Še vedno lahko gremo dlje in simuliramo neskončno število 3D kock z uporabo enega elementa — da, to je mogoče! Tukaj je mreža kock:

Ta predstavitev in naslednje predstavitve v času pisanja niso podprte v Safariju.

Noro, kajne? Zdaj ustvarjamo ponavljajoč se vzorec kock, izdelanih z enim samim elementom ... in prav tako brez psevdo! Ne bom se spuščal v podrobnosti o matematiki, ki jo uporabljamo (tam so zelo specifične številke), toda tukaj je številka za vizualizacijo, kako smo prišli sem:

Najprej uporabimo a conic-gradient da ustvarite ponavljajoči se vzorec kocke. Ponavljanje vzorca nadzirajo tri spremenljivke:

• --size: V skladu s svojim imenom nadzoruje velikost vsake kocke.
• --m: To predstavlja število stolpcev.
• --n: To je število vrstic.
• --gap: to je vrzel ali razdalja med kockama

.cube { --size: 40px; --m: 4; --n: 5; --gap :10px; aspect-ratio: var(--m) / var(--n); width: calc(var(--m) * (1.353 * var(--size) + var(--gap))); background: conic-gradient(from -90deg at var(--size) calc(0.353 * var(--size)), #249FAB 135deg, #81C5A3 0 270deg, #26609D 0) /* update the colors here */ 0 0 / calc(100% / var(--m)) calc(100% / var(--n));
}

Nato nanesemo plast maske z drugim vzorcem enake velikosti. To je najtežji del te ideje. Z uporabo kombinacije a linear-gradient in conic-gradient izrezali bomo nekaj delov našega elementa, da bodo vidne samo oblike kocke.

.cube { /* etc. */ mask: linear-gradient(to bottom right, #0000 calc(0.25 * var(--size)), #000 0 calc(100% - calc(0.25 * var(--size)) - 1.414 * var(--gap)), #0000 0), conic-gradient(from -90deg at right var(--gap) bottom var(--gap), #000 90deg, #0000 0); mask-size: calc(100% / var(--m)) calc(100% / var(--n)); mask-composite: intersect;
}

Koda je morda videti nekoliko zapletena, a zahvaljujoč spremenljivkam CSS moramo samo posodobiti nekaj vrednosti za nadzor naše matrike kock. Potrebujete mrežo 10⨉10? Posodobite --m in --n spremenljivke za 10. Potrebujete večji razmik med kockami? Posodobite --gap vrednost. Vrednosti barv se uporabijo samo enkrat, zato jih posodobite za novo barvno paleto!

Zdaj, ko imamo še eno 3D tehniko, jo uporabimo za izdelavo različic nalagalnika z igranjem z različnimi animacijami. Kaj pa na primer ponavljajoči se vzorec kock, ki neskončno drsijo od leve proti desni?

Ta nakladalnik določa štiri kocke v eni vrstici. To pomeni naše --n vrednost je 4 in --m je enako 1 . Z drugimi besedami, teh ne potrebujemo več!

Namesto tega lahko delamo z --size in --gap spremenljivke v mrežnem vsebniku:

.loader { --size: 70px; --gap: 15px; width: calc(3 * (1.353 * var(--size) + var(--gap))); display: grid; aspect-ratio: 3;
}

To je naš zabojnik. Imamo štiri kocke, vendar želimo prikazati samo tri v posodi naenkrat, tako da ena vedno drsi notri, druga pa ven. Zato upoštevamo širino 3 in nastavite razmerje stranic na 3 kot dobro.

Prepričajmo se, da je naš vzorec kocke nastavljen za širino štirih kock. To bomo naredili na zabojnikih ::before psevdoelement:

.loader::before { content: ""; width: calc(4 * 100% / 3); /* Code to create four cubes */
}

Zdaj, ko imamo štiri kocke v vsebniku s tremi kockami, lahko vzorec kocke poravnamo do konca mrežnega vsebnika, da ga prelijemo in prikažemo zadnje tri kocke:

.loader { /* same as before */ justify-content: end;
}

To je tisto, kar imamo do zdaj, z rdečim obrisom, ki prikazuje meje vsebnika mreže:

Zdaj moramo samo premakniti psevdoelement v desno z dodajanjem naše animacije:

@keyframes load { to { transform: translate(calc(100% / 4)); }
}

Ste razumeli trik animacije? Zaključimo to s skrivanjem prelivajočega se kockastega vzorca in z dodajanjem kančka maske, da ustvarimo tisti učinek bledenja, kot sta začetek in konec:

.loader { --size: 70px; --gap: 15px; width: calc(3*(1.353*var(--s) + var(--g))); display: grid; justify-items: end; aspect-ratio: 3; overflow: hidden; mask: linear-gradient(90deg, #0000, #000 30px calc(100% - 30px), #0000);
}

To lahko naredimo veliko bolj prilagodljivo z uvedbo spremenljivke, --n, da nastavite, koliko kock je hkrati prikazanih v vsebniku. In ker mora biti skupno število kock v vzorcu ena več kot --n, to lahko izrazimo kot calc(var(--n) + 1).

Tukaj je vse:

V redu, še en 3D-nalagalnik, ki je podoben, vendar ima kocke, ki zaporedoma spreminjajo barvo, namesto da drsijo:

Zanašali se bomo na animirano ozadje z background-blend-mode za tole:

.loader { /* ... */ background: linear-gradient(#ff1818 0 0) 0% / calc(100% / 3) 100% no-repeat, /* ... */; background-blend-mode: multiply; /* ... */ animation: load steps(3) 1.5s infinite;
}
@keyframes load { to { background-position: 150%; }
}

Odstranil sem odvečno kodo, uporabljeno za ustvarjanje enake postavitve kot v zadnjem primeru, vendar s tremi kockami namesto štirimi. Tukaj dodajam gradient, definiran s posebno barvo, ki se zlije s stožčastim gradientom, tako kot smo to storili prej za 3D-nalagalnik vrstice napredka.

Od tam naprej animira prelive ozadja background-position kot animacija v treh korakih, da kocke ena za drugo utripajo barve.

Če niste seznanjeni z vrednostmi, za katere uporabljam background-position in sintakso ozadja toplo priporočam enega mojih prejšnjih člankov in eno od moji odgovori Stack Overflow. Tam boste našli zelo podrobno razlago.

Ali lahko posodobimo število kock, da bo spremenljivo?

Da, imam rešitev za to, vendar bi rad, da ga preizkusite, namesto da ga vdelate sem. Vzemite, kar smo se naučili iz prejšnjega primera, in poskusite narediti enako s tem — nato delite svoje delo v komentarjih!

Različic na pretek!

Tako kot druge tri članke v tej seriji bi vam rad dal nekaj navdiha, da se podate naprej in ustvarite svoje lastne nakladalce. Tukaj je zbirka, ki vključuje 3D-nakladalnike, ki smo jih naredili skupaj, in nekaj drugih, ki bodo spodbudili vašo domišljijo:

To je zavitek

Resnično upam, da ste uživali v preživljanju časa z mano v zadnjih nekaj tednih pri izdelavi nakladalnikov za posamezne elemente. Noro je, da smo začeli z navidezno preprostim spinnerjem in nato postopoma dodajali nove dele, da smo delali sami, vse do 3D tehnik, ki še vedno uporabljajo samo en element v označbi. Točno tako izgleda CSS, ko izkoristimo njegove moči: razširljiv, prilagodljiv in večkrat uporaben.

Še enkrat hvala za branje te majhne serije! Podpisal se bom in vas spomnil, da imam zbirka več kot 500 nakladalcev če iščete več idej in navdiha.

---

Nakladalniki enega elementa: gremo v 3D! prvotno objavljeno na CSS-triki. Moral bi prejemanje glasila.

• Coinsmart. Najboljša evropska borza bitcoinov in kriptovalut.
• Platoblockchain. Web3 Metaverse Intelligence. Razširjeno znanje. PROST DOSTOP.
• CryptoHawk. Altcoin radar. Brezplačen preizkus.
• Source: https://css-tricks.com/single-element-loaders-going-3d/