A hullám valószínűleg az egyik legnehezebben elkészíthető alakzat a CSS-ben. Mindig olyan tulajdonságokkal próbáljuk megközelíteni, mint pl border-radius és sok-sok mágikus szám, amíg nem kapunk valamit, ami közelinek tűnik. És ez még azelőtt van, hogy a hullámos mintákba kezdenénk, amelyek nehezebbek.
"SVG it!" mondhatja, és valószínűleg igaza van, hogy ez jobb út. De látni fogjuk, hogy a CSS szép hullámokat tud kelteni, és a kódnak nem kell teljesen őrültnek lennie. És képzeld csak? Nekem van egy online generátor hogy még triviálisabb legyen!
Ha játszik a generátorral, láthatja, hogy az általa kiköpött CSS csak két gradiens és egy CSS-maszk tulajdonság – csak ez a két dolog, és bármilyen hullámformát vagy mintát készíthetünk. Arról nem is beszélve, hogy közben könnyedén szabályozhatjuk a hullámok méretét és görbületét.
Néhány érték így nézhet ki: "mágikus számok", de valójában logika van mögöttük, mi pedig kiboncoljuk a kódot, és felfedezzük a hullámok létrehozásának minden titkát.
Ez a cikk a folytatása egy korábbi ahol mindenféle cikk-cakk, távcső, csipkés és igen, hullámos szegélyt építettem. Erősen javaslom, hogy nézze meg ezt a cikket, mivel ugyanazt a technikát használja, amelyet itt tárgyalunk, de részletesebben.
A matematika a hullámok mögött
Szigorúan véve a hullámos formák mögött nincs egyetlen mágikus képlet sem. Bármilyen alakzatot felfelé és lefelé mutató görbékkel hullámnak nevezhetünk, így nem korlátozzuk magunkat az összetett matematikára. Ehelyett egy hullámot reprodukálunk a geometria alapjainak felhasználásával.
Kezdjük egy egyszerű példával, két kör alakzat használatával:
Van két azonos sugarú körünk egymás mellett. Látod azt a piros vonalat? Lefedi az első kör felső felét és a második kör alsó felét. Most képzeld el, hogy felveszed ezt a sort, és megismételed.
Már látjuk a hullámot. Most töltsük ki az alsó részt (vagy a felsőt), hogy a következőket kapjuk:
Tada! Van egy hullámos alakunk, amelyet a kör sugarainak egy változójával szabályozhatunk. Ez az egyik legegyszerűbb hullám, amelyet kelteni tudunk, és ez az, amiben megmutatkoztam this előző cikk
Adjunk hozzá egy kis bonyolultságot úgy, hogy az első illusztrációt és egy kicsit mozgatjuk a köröket:
Még mindig van két azonos sugarú körünk, de már nincsenek vízszintesen igazítva. Ebben az esetben a piros vonal már nem az egyes körök területének felét fedi le, hanem egy kisebb területet. Ezt a területet a szaggatott piros vonal határolja. Ez a vonal metszi azt a pontot, ahol a két kör találkozik.
Most vegye ezt a sort, és ismételje meg, és kap egy másik hullámot, egy simábbat.
Szerintem érted az ötletet. A körök helyzetének és méretének szabályozásával tetszőleges hullámot hozhatunk létre. Akár változókat is készíthetünk hozzájuk, amit én hívok P és a S, Ill.
Valószínűleg észrevette, hogy az online generátorban két bemenettel vezéreljük a hullámot. Leképeznek a fenti változókra. S a „hullám mérete” és P a „hullám görbülete”.
én határozom meg P as P = m*S ahol m az a változó, amelyet a hullám görbületének frissítésekor állít be. Ez lehetővé teszi számunkra, hogy mindig ugyanaz a görbület legyen, még akkor is, ha frissítjük az S-t.
m között tetszőleges érték lehet 0 és a 2. 0 megadja nekünk az első konkrét esetet, amikor mindkét kör vízszintesen van igazítva. 2 egyfajta maximális érték. Mehetünk nagyobbra is, de néhány teszt után ezt találtam 2 rossz, lapos formákat hoz létre.
Ne felejtsük el körünk sugarát! Ezt a segítségével is meg lehet határozni S és a P mint ez:
R = sqrt(P² + S²)/2Amikor P egyenlő 0, nekünk lesz R = S/2.
Mindenünk megvan ahhoz, hogy mindezt gradiensekké alakítsuk át a CSS-ben!
Színátmenetek létrehozása
Hullámaink köröket használnak, és amikor körökről beszélünk, radiális gradiensekről beszélünk. És mivel két kör határozza meg a hullámunkat, logikusan két radiális gradienst fogunk használni.
Kezdjük azzal a konkrét esettel, amikor P egyenlő 0. Íme az első gradiens illusztrációja:
Ez a gradiens hozza létre az első görbületet, miközben kitölti a teljes alsó részt – úgymond a hullám „vizét”.
.wave {
--size: 50px;
mask: radial-gradient(var(--size) at 50% 0%, #0000 99%, red 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}A --size változó határozza meg a radiális gradiens sugarát és méretét. Ha összehasonlítjuk a S változó, akkor egyenlő vele S/2.
Most adjuk hozzá a második színátmenetet:
A második gradiens nem más, mint egy kör, amely befejezi hullámunkat:
radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%Ha megnézed az előző cikk látni fogja, hogy egyszerűen azt ismétlem, amit ott már tettem.
Mindkét cikket követtem, de a gradiens konfigurációk nem ugyanazok.
Ennek az az oka, hogy ugyanazt az eredményt érhetjük el különböző gradiens-konfigurációk használatával. Ha a két konfigurációt összehasonlítja, kis különbséget fog észrevenni az elrendezésben, de a trükk ugyanaz. Ez zavaró lehet, ha nem ismeri a színátmeneteket, de ne aggódjon. Némi gyakorlással megszokja őket, és magától rájön, hogy a különböző szintaxisok ugyanarra az eredményre vezethetnek.
Íme az első hullám teljes kódja:
.wave {
--size: 50px;
mask:
radial-gradient(var(--size) at 50% var(--size),#000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% 0px, #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Most vegyük ezt a kódot, és állítsuk be, ahol bevezetünk egy változót, amely teljesen újrafelhasználhatóvá teszi bármilyen hullám létrehozásához. Ahogy az előző részben láttuk, a fő trükk a körök mozgatása, hogy ne legyenek igazítva, ezért frissítsük mindegyik helyzetét. Az elsőt felfelé, a másodikat lefelé mozgatjuk.
A kódunk így fog kinézni:
.wave {
--size: 50px;
--p: 25px;
mask:
radial-gradient(var(--size) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--size) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Bevezettem egy újat --p változó, amely az egyes körök középpontjának meghatározására szolgál. Az első gradiens használatban van 50% calc(-1*var(--p)), így a közepe felfelé mozdul, miközben a második használja calc(var(--size) + var(--p)) lefelé mozgatni.
Egy demó többet ér ezer szónál:
A körök nincsenek egymáshoz igazítva, és nem érintik egymást. Messzire helyeztük őket egymástól anélkül, hogy megváltoztattuk volna a sugarukat, így elvesztettük a hullámot. De kijavíthatjuk a dolgokat, ha ugyanazt a matematikát használjuk, mint korábban az új sugár kiszámításához. Emlékezz arra R = sqrt(P² + S²)/2. A mi esetünkben, --size egyenlő S/2; ugyanaz a számára --p ami szintén egyenlő azzal P/2 mivel mindkét kört mozgatjuk. Tehát a középpontjaik közötti távolság kétszerese az értékének --p ezért:
R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))Ez ad nekünk egy eredményt 55.9px.
A hullámunk visszatért! Csatlakoztassuk ezt az egyenletet a CSS-ünkhöz:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size)*var(--size));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0 / calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1*var(--p)), #0000 99%, #000 101%)
50% var(--size)/calc(4 * var(--size)) 100% repeat-x;
}Ez érvényes CSS kód. sqrt() a specifikáció része, de amikor ezt írom, még nem támogatja a böngésző. Ez azt jelenti, hogy szükségünk van egy kis JavaScript-re vagy Sass-re, hogy kiszámítsuk ezt az értéket, amíg szélesebbé nem válik sqrt() támogatást.
Ez baromi klassz: mindössze két színátmenetre van szükség ahhoz, hogy hűvös hullámot kapjunk, amelyet bármelyik elemre alkalmazhatunk a mask ingatlan. Nincs több próbálkozás és hiba – mindössze két változót kell frissítenie, és már mehet is!
A hullám megfordítása
Mi van, ha azt akarjuk, hogy a hullámok a másik irányba menjenek, ahol a „víz” helyett az „eget” töltjük be. Akár hiszi, akár nem, mindössze két értéket kell frissítenünk:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p) * var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at 50% calc(100% - (var(--size) + var(--p))), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(100% + var(--p)), #0000 99%, #000 101%)
50% calc(100% - var(--size)) / calc(4 * var(--size)) 100% repeat-x;
}Csak annyit tettem ott, hogy hozzáadtam egy eltolást, ami egyenlő 100%, fent kiemelve. Íme az eredmény:
Megfontolhatunk egy barátságosabb szintaxist a kulcsszóértékek használatával, hogy még könnyebb legyen:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size) * var(--size));
mask:
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
calc(50% - 2 * var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Használjuk a left és a bottom kulcsszavak az oldalak és az eltolás megadásához. Alapértelmezés szerint a böngésző alapértelmezés szerint a left és a top - ezért használjuk 100% hogy az elemet lefelé mozgassa. A valóságban áthelyezzük a top by 100%, tehát valójában ugyanaz, mint kimondani bottom. Sokkal könnyebben olvasható, mint a matematika!
Ezzel a frissített szintaxissal csak cserélnünk kell bottom mert top – vagy fordítva – a hullám irányának megváltoztatásához.
Ha pedig felső és alsó hullámokat is szeretne kapni, akkor az összes színátmenetet egyetlen deklarációban egyesítjük:
.wave {
--size: 50px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
mask:
/* Gradient 1 */
radial-gradient(var(--R) at left 50% bottom calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2*var(--size)) bottom 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 2 */
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% bottom var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x,
/* Gradient 3 */
radial-gradient(var(--R) at left 50% top calc(var(--size) + var(--p)), #000 99%, #0000 101%)
left calc(50% - 2 * var(--size)) top 0 / calc(4 * var(--size)) 51% repeat-x,
/* Gradient 4 */
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), #0000 99%, #000 101%)
left 50% top var(--size) / calc(4 * var(--size)) calc(51% - var(--size)) repeat-x;
}Ha ellenőrzi a kódot, látni fogja, hogy az összes színátmenet kombinálása mellett a magasságukat is csökkentettem. 100% nak nek 51% hogy mindketten lefedjék az elem felét. Igen, 51%. Szükségünk van arra a kis plusz százalékra egy kis átfedéshez, amely elkerüli a hiányosságokat.
Mi a helyzet a bal és a jobb oldallal?
Ez a házi feladatod! Vegyük azt, amit a felső és az alsó oldallal csináltunk, és próbáljuk meg frissíteni az értékeket, hogy megkapjuk a jobb és bal értékeket. Ne aggódjon, ez egyszerű, és az egyetlen dolog, amit tennie kell, az értékek felcserélése.
Ha gondja van, mindig használhatja az online generátor a kód ellenőrzéséhez és az eredmény megjelenítéséhez.
Hullámos vonalak
Korábban megtettük az első hullámot egy piros vonal segítségével, majd kitöltöttük az elem alsó részét. Mit szólnál ehhez a hullámos vonalhoz? Ez is egy hullám! Még jobb, ha a vastagságát egy változóval szabályozhatjuk, így újra felhasználhatjuk. Csináljuk!
Nem kezdjük elölről, hanem vegyük az előző kódot és frissítjük azt. Első lépésként frissítse a színátmenetek színpontjait. Mindkét színátmenet egy átlátszó színtől egy átlátszatlanig kezdődik, vagy fordítva. Egy vonal vagy szegély szimulálásához átlátszótól kell kezdenünk, átlátszatlanra, majd ismét átlátszóra:
#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%Szerintem már sejtetted, hogy a --b változó az, amit a vonalvastagság szabályozására használunk. Alkalmazzuk ezt a színátmeneteinkre:
Igen, az eredmény messze nem hullámos. De közelről nézve láthatjuk, hogy az egyik gradiens helyesen hozza létre az alsó görbületet. Tehát tényleg csak a második gradienst kell kijavítanunk. A teljes kör megtartása helyett készítsünk részleges színátmenetet a másikhoz.
Még messze, de mindkét görbületünk megvan, amire szükségünk van! Ha ellenőrzi a kódot, látni fogja, hogy két azonos színátmenetünk van. Az egyetlen különbség a helyzetükben van:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 0/calc(4*var(--size)) 100%,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)), var(--_g))
50% var(--size)/calc(4*var(--size)) 100%;
}Most be kell állítanunk a méretet és a pozíciót a végső formához. Már nincs szükségünk arra, hogy a gradiens teljes magasságú legyen, így ki tudjuk cserélni 100% ezzel:
/* Size plus thickness */
calc(var(--size) + var(--b))Ezen érték mögött nincs matematikai logika. Csak elég nagynak kell lennie a görbülethez. Rövidesen látni fogjuk a mintára gyakorolt hatását. Addig is frissítsük a pozíciót, hogy függőlegesen középre állítsuk a színátmeneteket:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: sqrt(var(--p)*var(--p) + var(--size)*var(--size));
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1*var(--p)), var(--_g))
calc(50% - 2*var(--size)) 50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat,
radial-gradient(var(--R) at left 50% top calc(-1 * var(--p)), var(--_g)) 50%
50%/calc(4 * var(--size)) calc(var(--size) + var(--b)) no-repeat;
}Még mindig nem egészen:
Az egyik gradiensnek kissé lefelé, a másiknak felfelé kell mozognia. Mindkettőnek magasságuk felével kell mozognia.
Már majdnem ott vagyunk! Egy kis javításra van szükségünk a sugár tökéletes átfedéséhez. Mindkét vonalat a határ felével kell eltolni (--b) vastagság:
Megvan! Tökéletes hullámvonal, amelyet néhány változó vezérlésével könnyen beállíthatunk:
.wave {
--size: 50px;
--b: 10px;
--p: 25px;
--R: calc(sqrt(var(--p) * var(--p) + var(--size) * var(--size)) + var(--b) / 2);
--_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
mask:
radial-gradient(var(--R) at left 50% bottom calc(-1 * var(--p)), var(--_g))
calc(50% - 2*var(--size)) calc(50% - var(--size)/2 - var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x,
radial-gradient(var(--R) at left 50% top calc(-1*var(--p)),var(--_g))
50% calc(50% + var(--size)/2 + var(--b)/2) / calc(4 * var(--size)) calc(var(--size) + var(--b)) repeat-x;
}Tudom, hogy a logikát kell egy kicsit megérteni. Ez rendben van, és ahogy mondtam, hullámos alakzatot létrehozni a CSS-ben nem könnyű, nem is beszélve a mögötte lévő bonyolult matematikáról. Ezért a online generátor életmentő – könnyen megkaphatja a végső kódot, még akkor is, ha nem érti teljesen a mögöttes logikát.
Hullámos minták
A most elkészített hullámvonalból mintát készíthetünk!
Ó, nem, a minta kódja még nehezebb lesz megérteni!
Egyáltalán nem! A kód már megvan. Mindössze annyit kell tennünk, hogy eltávolítjuk repeat-x abból, ami már van, és tada. 🎉
Szép hullámos minta. Emlékszel az egyenletre, amit mondtam, hogy újra meglátogatjuk?
/* Size plus thickness */
calc(var(--size) + var(--b))Nos, ez szabályozza a vonalak közötti távolságot a mintában. Csinálhatunk belőle változót, de nincs szükség nagyobb bonyolultságra. Nem is használok ehhez változót a generátorban. Talán később változtatok ezen.
Itt ugyanaz a minta, amely más irányba megy:
A demóban szereplő kódot megadom Önnek, de szeretném, ha boncolgassa azt, és megértse, milyen változtatásokat végeztem ennek érdekében.
A kód egyszerűsítése
Az összes korábbi demóban mindig meghatározzuk a --size és a --p függetlenül. De emlékszel, hogyan említettem korábban, hogy az online generátor értékel P mint egyenlő m*S, Ahol m szabályozza a hullám görbületét? Egy fix szorzó meghatározásával egy adott hullámmal dolgozhatunk, és a kód könnyebbé válik. A legtöbb esetben erre lesz szükségünk: egy adott hullámos alakra és egy változóra, amely szabályozza a méretét.
Frissítsük kódunkat, és mutassuk be a m változó:
.wave {
--size: 50px;
--R: calc(var(--size) * sqrt(var(--m) * var(--m) + 1));
mask:
radial-gradient(var(--R) at 50% calc(var(--size) * (1 + var(--m))), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-1 * var(--size) * var(--m)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
}Amint látja, már nincs szükségünk a --p változó. helyettesítettem vele var(--m)*var(--size), és ennek megfelelően optimalizálta a matematika egy részét. Most, ha egy adott hullámos formával akarunk dolgozni, akkor elhagyhatjuk a --m változót, és cserélje ki egy fix értékre. Próbáljuk meg .8 pl.
--size: 50px;
--R: calc(var(--size) * 1.28);
mask:
radial-gradient(var(--R) at 50% calc(1.8 * var(--size)), #000 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%,
radial-gradient(var(--R) at 50% calc(-.8 * var(--size)), #0000 99%, #000 101%)
50% var(--size) / calc(4 * var(--size)) 100% repeat-x;Látod, hogyan könnyebb most a kód? Csak egy változó szabályozhatja a hullámot, és nem kell többé támaszkodnia sqrt() amely nem támogatja a böngészőt!
Ugyanezt a logikát alkalmazhatja az összes demóra, amit láttunk, még a hullámos vonalak és a minta esetében is. Részletes matematikai magyarázattal kezdtem, és megadtam az általános kódot, de előfordulhat, hogy valós használat esetén könnyebb kódra lesz szüksége. Ezt csinálom állandóan. Ritkán használom az általános kódot, de mindig az egyszerűsített változatot tartom szem előtt, főleg, hogy a legtöbb esetben olyan ismert értékeket használok, amelyeket nem kell változóként tárolni. (Spoiler figyelmeztetés: A végén megosztok néhány példát!)
Ennek a megközelítésnek a korlátai
Matematikailag az általunk készített kódnak tökéletes hullámos formákat és mintákat kell adnia nekünk, de a valóságban furcsa eredményekkel kell szembenéznünk. Tehát igen, ennek a módszernek megvannak a maga korlátai. Például az online generátor gyenge eredményeket képes produkálni, különösen hullámos vonalak esetén. A probléma egy része az értékek egy bizonyos kombinációjából adódik, ahol az eredmény összekeveredik, például a szegélyvastagság nagy értékének használata a mérethez képest:
A többi esetben a kerekítéssel kapcsolatos probléma, amely eltolódást és hézagokat eredményez a hullámok között:
Ennek ellenére továbbra is úgy gondolom, hogy az általunk tárgyalt módszer továbbra is jó, mert a legtöbb esetben sima hullámokat produkál, és könnyen elkerülhetjük a rossz eredményeket, ha különböző értékekkel játszunk, amíg tökéletes nem lesz.
Csomagolta
Remélem, hogy e cikk után nem fog többé próbálkozni és hibázni, hogy hullámos formát vagy mintát hozzon létre. Továbbá az online generátorhoz, megvan az összes matematikai titka a kívánt hullám létrehozása mögött!
A cikk itt ér véget, de most egy hatékony eszköz áll rendelkezésére, amellyel elegáns, hullámos formákat használó terveket hozhat létre. Íme az inspiráció a kezdéshez…
Mi van veled? Használd az online generátoromat (vagy írd meg kézzel a kódot, ha már fejből megtanultad az összes matematikát), és mutasd meg az alkotásaidat! Legyen egy jó gyűjtemény a megjegyzés rovatban.
