De golf is waarschijnlijk een van de moeilijkste vormen om in CSS te maken. We proberen het altijd te benaderen met eigenschappen zoals border-radius en veel magische getallen totdat we iets krijgen dat een beetje dichtbij voelt. En dat is voordat we zelfs in golvende patronen komen, die moeilijker zijn.
"SVG het!" zou je kunnen zeggen, en je hebt waarschijnlijk gelijk dat het een betere manier is om te gaan. Maar we zullen zien dat CSS mooie golven kan maken en de code daarvoor hoeft niet allemaal gek te zijn. En raad eens? ik heb een online generator om het nog trivialer te maken!
Als je met de generator speelt, kun je zien dat de CSS die hij uitspuugt slechts twee verlopen en een CSS-maskereigenschap is - alleen die twee dingen en we kunnen elke vorm van golfvorm of -patroon maken. Om nog maar te zwijgen van het feit dat we de grootte en de kromming van de golven gemakkelijk kunnen regelen terwijl we bezig zijn.
Sommige waarden kunnen er als volgt uitzien:magische getallen” maar er zit eigenlijk logica achter en we zullen de code ontleden en alle geheimen ontdekken achter het creëren van golven.
Dit artikel is een vervolg op een vorige waar ik allerlei verschillende zigzag-, scoped-, geschulpte en ja, golvende grensranden bouwde. Ik raad ten zeerste aan om dat artikel te controleren, omdat het dezelfde techniek gebruikt die we hier zullen bespreken, maar dan in meer detail.
De wiskunde achter golven
Strikt genomen zit er niet één magische formule achter golvende vormen. Elke vorm met krommen die op en neer gaan, kan een golf worden genoemd, dus we gaan ons niet beperken tot complexe wiskunde. In plaats daarvan zullen we een golf reproduceren met behulp van de basisprincipes van geometrie.
Laten we beginnen met een eenvoudig voorbeeld met twee cirkelvormen:
We hebben twee cirkels met dezelfde straal naast elkaar. Zie je die rode lijn? Het bedekt de bovenste helft van de eerste cirkel en de onderste helft van de tweede. Stel je nu voor dat je die regel neemt en herhaalt.
We zien de golf al. Laten we nu het onderste deel (of het bovenste) vullen om het volgende te krijgen:
Tadá! We hebben een golvende vorm en een die we kunnen besturen met één variabele voor de cirkelradii. Dit is een van de gemakkelijkste golven die we kunnen maken en het is degene waar ik mee pronkte this vorige artikel
Laten we een beetje complexiteit toevoegen door de eerste illustratie te nemen en de cirkels een beetje te verplaatsen:
We hebben nog steeds twee cirkels met dezelfde stralen, maar ze zijn niet langer horizontaal uitgelijnd. In dit geval beslaat de rode lijn niet langer de helft van het gebied van elke cirkel, maar een kleiner gebied. Dit gebied wordt begrensd door de rode stippellijn. Die lijn kruist het punt waar beide cirkels samenkomen.
Neem nu die regel en herhaal hem en je krijgt nog een golf, een soepelere.
Ik denk dat je het idee snapt. Door de positie en grootte van de cirkels te regelen, kunnen we elke gewenste golf maken. We kunnen er zelfs variabelen voor maken, die ik zal noemen P en S, Respectievelijk.
Je hebt waarschijnlijk gemerkt dat we in de online generator de golf besturen met behulp van twee ingangen. Ze komen overeen met de bovenstaande variabelen. S is de "Grootte van de golf" en P is de "kromming van de golf".
ik definieer P as P = m*S WAAR m is de variabele die u aanpast bij het bijwerken van de kromming van de golf. Hierdoor kunnen we altijd dezelfde kromming hebben, zelfs als we S.
m kan elke waarde zijn tussen 0 en 2. 0 geeft ons het eerste specifieke geval waarin beide cirkels horizontaal zijn uitgelijnd. 2 is een soort maximale waarde. We kunnen groter gaan, maar na een paar tests vond ik dat alles hierboven 2 produceert slechte, platte vormen.
Laten we de straal van onze cirkel niet vergeten! Dat kan ook worden gedefinieerd met S en P soortgelijk:
R = sqrt(P² + S²)/2. P is gelijk aan 0, we zullen hebben R = S/2.
We hebben alles om dit alles in CSS om te zetten in verlopen!
Verlopen maken
Onze golven gebruiken cirkels en als we het over cirkels hebben, hebben we het over radiale gradiënten. En aangezien twee cirkels onze golf definiëren, zullen we logischerwijs twee radiale gradiënten gebruiken.
We zullen beginnen met het specifieke geval waarin: P is gelijk aan 0. Hier is de illustratie van het eerste verloop:
Deze gradiënt creëert de eerste kromming terwijl het hele bodemgebied wordt ingevuld - het "water" van de golf om zo te zeggen.
.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;
}De --size variabele definieert de straal en de grootte van de radiale gradiënt. Als we het vergelijken met de S variabele, dan is het gelijk aan S/2.
Laten we nu het tweede verloop toevoegen:
De tweede gradiënt is niets anders dan een cirkel om onze golf te voltooien:
radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%)
calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%Als u het selectievakje het vorige artikel je zult zien dat ik gewoon herhaal wat ik daar al deed.
Ik heb beide artikelen gevolgd, maar de verloopconfiguraties zijn niet hetzelfde.
Dat komt omdat we hetzelfde resultaat kunnen bereiken met verschillende gradiëntconfiguraties. U zult een klein verschil in de uitlijning opmerken als u beide configuraties vergelijkt, maar de truc is hetzelfde. Dit kan verwarrend zijn als je niet bekend bent met verlopen, maar maak je geen zorgen. Met wat oefening raak je eraan gewend en zul je vanzelf merken dat verschillende syntaxis tot hetzelfde resultaat kunnen leiden.
Hier is de volledige code voor onze eerste golf:
.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;
}Laten we nu deze code nemen en aanpassen naar waar we een variabele introduceren die dit volledig herbruikbaar maakt voor het maken van elke gewenste golf. Zoals we in het vorige gedeelte zagen, is de belangrijkste truc om de cirkels te verplaatsen zodat ze niet meer uitgelijnd zijn, dus laten we de positie van elke cirkel bijwerken. We verplaatsen de eerste naar boven en de tweede naar beneden.
Onze code ziet er als volgt uit:
.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;
}Ik heb een nieuwe . geïntroduceerd --p variabele die het heeft gebruikt om de middenpositie van elke cirkel te definiëren. Het eerste verloop gebruikt 50% calc(-1*var(--p)), dus het midden beweegt omhoog terwijl de tweede wordt gebruikt calc(var(--size) + var(--p)) om het naar beneden te verplaatsen.
Een demo zegt meer dan duizend woorden:
De cirkels zijn niet uitgelijnd en raken elkaar niet. We hebben ze ver uit elkaar geplaatst zonder hun straal te veranderen, dus we verloren onze golf. Maar we kunnen dingen oplossen door dezelfde wiskunde te gebruiken die we eerder hebben gebruikt om de nieuwe straal te berekenen. Onthoud dat R = sqrt(P² + S²)/2. In ons geval, --size is gelijk aan S/2; hetzelfde voor --p wat ook gelijk is aan P/2 aangezien we beide cirkels verplaatsen. Dus de afstand tussen hun middelpunten is het dubbele van de waarde van --p voor deze:
R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))Dat geeft ons een resultaat van 55.9px.
Onze golf is terug! Laten we die vergelijking in onze CSS opnemen:
.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;
}Dit is geldige CSS-code. sqrt() maakt deel uit van de specificatie, maar op het moment dat ik dit schrijf, is er geen browserondersteuning voor. Dat betekent dat we een beetje JavaScript of Sass nodig hebben om die waarde te berekenen totdat we breder worden sqrt() Ondersteunen.
Dit is best cool: je hebt alleen twee gradiënten nodig om een coole golf te krijgen die je op elk element kunt toepassen met de mask eigendom. Geen vallen en opstaan meer - u hoeft alleen maar twee variabelen bij te werken en u kunt aan de slag!
De golf omkeren
Wat als we willen dat de golven de andere kant op gaan, waar we de "lucht" vullen in plaats van het "water". Geloof het of niet, we hoeven alleen maar twee waarden bij te werken:
.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;
}Het enige wat ik daar deed, is een offset toevoegen die gelijk is aan 100%, hierboven gemarkeerd. Hier is het resultaat:
We kunnen een gebruiksvriendelijkere syntaxis overwegen met zoekwoordwaarden om het nog eenvoudiger te maken:
.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;
}We gebruiken de left en bottom trefwoorden om de zijden en de offset te specificeren. Standaard staat de browser standaard op: left en top - daarom gebruiken we 100% om het element naar beneden te verplaatsen. In werkelijkheid verplaatsen we het van de top by 100%, dus het is eigenlijk hetzelfde als zeggen bottom. Veel gemakkelijker te lezen dan wiskunde!
Met deze bijgewerkte syntaxis hoeven we alleen maar te wisselen bottom For top — of omgekeerd — om de richting van de golf te veranderen.
En als u zowel de bovenste als de onderste golven wilt krijgen, combineren we alle verlopen in één enkele verklaring:
.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;
}Als je de code controleert, zul je zien dat ik niet alleen alle hellingen heb gecombineerd, maar ook hun hoogte heb verlaagd van 100% naar 51% zodat ze allebei de helft van het element bedekken. Ja, 51%. We hebben dat beetje extra procent nodig voor een kleine overlap die hiaten voorkomt.
Hoe zit het met de linker- en rechterkant?
Het is jouw huiswerk! Neem wat we hebben gedaan met de boven- en onderkant en probeer de waarden bij te werken om de rechter- en linkerwaarden te krijgen. Maak je geen zorgen, het is gemakkelijk en het enige wat je hoeft te doen is om waarden te wisselen.
Als je problemen hebt, kun je altijd gebruik maken van de online generator om de code te controleren en het resultaat te visualiseren.
Golvende lijnen
Eerder maakten we onze eerste golf met een rode lijn en vulden vervolgens het onderste gedeelte van het element. Hoe zit het met die golvende lijn? Dat is ook een golf! Nog beter is als we de dikte ervan kunnen regelen met een variabele, zodat we deze opnieuw kunnen gebruiken. Laten we het doen!
We beginnen niet helemaal opnieuw, maar nemen eerder de vorige code en werken deze bij. Het eerste dat u moet doen, is de kleurstops van de verlopen bijwerken. Beide verlopen gaan van een transparante kleur naar een ondoorzichtige kleur, of omgekeerd. Om een lijn of rand te simuleren, moeten we beginnen met transparant, naar dekkend gaan en dan weer terug naar transparant:
#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%Ik denk dat je al geraden had dat de --b variabele is wat we gebruiken om de lijndikte te regelen. Laten we dit toepassen op onze verlopen:
Ja, het resultaat is verre van een golvende lijn. Maar als we goed kijken, kunnen we zien dat één verloop de onderste kromming correct creëert. Het enige dat we dus echt hoeven te doen, is het tweede verloop corrigeren. Laten we in plaats van een volledige cirkel te houden, een gedeeltelijke maken zoals de andere gradiënt.
Nog steeds ver, maar we hebben beide krommingen die we nodig hebben! Als u de code controleert, ziet u dat we twee identieke verlopen hebben. Het enige verschil is hun positionering:
.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%;
}Nu moeten we de grootte en positie aanpassen voor de uiteindelijke vorm. We hebben het verloop niet langer nodig om de volledige hoogte te hebben, dus we kunnen het vervangen 100% hiermee:
/* Size plus thickness */
calc(var(--size) + var(--b))Er zit geen wiskundige logica achter deze waarde. Het hoeft alleen groot genoeg te zijn voor de kromming. We zullen het effect ervan op het patroon zo meteen zien. Laten we in de tussentijd ook de positie bijwerken om de hellingen verticaal te centreren:
.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;
}Ben er nog niet helemaal:
De ene helling moet een beetje naar beneden en de andere een beetje omhoog. Beiden moeten de helft van hun lengte bewegen.
We zijn er bijna! We hebben een kleine fix nodig om de straal een perfecte overlap te geven. Beide lijnen moeten met de helft van de rand worden verschoven (--b) dikte:
We hebben het! Een perfecte golvende lijn die we gemakkelijk kunnen aanpassen door een paar variabelen te regelen:
.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;
}Ik weet dat de logica een beetje nodig is om te begrijpen. Dat is prima en zoals ik al zei, het creëren van een golvende vorm in CSS is niet eenvoudig, om nog maar te zwijgen van de lastige wiskunde erachter. Dat is waarom de onlinegenerator is een redder in nood - u kunt gemakkelijk de definitieve code krijgen, zelfs als u de logica erachter niet volledig begrijpt.
Golvende patronen
We kunnen een patroon maken van de golvende lijn die we zojuist hebben gemaakt!
Oh nee, de code van het patroon zal nog moeilijker te begrijpen zijn!
Helemaal niet! We hebben de code al. Het enige wat we hoeven te doen is verwijderen repeat-x van wat we al hebben, en tada.
Een mooi golvend patroon. Herinner je je de vergelijking waarvan ik zei dat we ze nog eens zouden bekijken?
/* Size plus thickness */
calc(var(--size) + var(--b))Dit is wat de afstand tussen de lijnen in het patroon bepaalt. We kunnen er een variabele van maken, maar meer complexiteit is niet nodig. Ik gebruik daarvoor niet eens een variabele in de generator. Misschien verander ik dat later.
Hier is hetzelfde patroon in een andere richting:
Ik geef je de code in die demo, maar ik zou graag willen dat je het ontleden en begrijpt welke wijzigingen ik heb aangebracht om dat mogelijk te maken.
De code vereenvoudigen
In alle voorgaande demo's definiëren we altijd de --size en --p onafhankelijk. Maar weet je nog hoe ik eerder zei dat de online generator evalueert? P gelijk aan m*S, Waar m regelt de kromming van de golf? Door een vaste vermenigvuldiger te definiëren, kunnen we met één bepaalde golf werken en kan de code eenvoudiger worden. Dit is wat we in de meeste gevallen nodig hebben: een specifieke golvende vorm en een variabele om de grootte ervan te regelen.
Laten we onze code bijwerken en de . introduceren m variabele:
.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;
}Zoals je kunt zien, hebben we de --p variabel. Ik heb het vervangen door var(--m)*var(--size), en optimaliseerde een deel van de wiskunde dienovereenkomstig. Als we nu met een bepaalde golvende vorm willen werken, kunnen we de weglaten --m variabele en vervang deze door een vaste waarde. Laten we proberen .8 bijvoorbeeld.
--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;Zie je hoe de code nu eenvoudiger is? Slechts één variabele om uw golf te regelen, en u hoeft er niet meer op te vertrouwen sqrt() die geen browserondersteuning heeft!
Je kunt dezelfde logica toepassen op alle demo's die we hebben gezien, zelfs voor de golvende lijnen en het patroon. Ik begon met een gedetailleerde wiskundige uitleg en gaf de generieke code, maar misschien heb je in een echt gebruiksgeval een eenvoudigere code nodig. Dit is wat ik de hele tijd doe. Ik gebruik zelden de generieke code, maar ik overweeg altijd een vereenvoudigde versie, vooral omdat ik in de meeste gevallen enkele bekende waarden gebruik die niet als variabelen hoeven te worden opgeslagen. (Spoiler alert: Ik zal aan het einde een paar voorbeelden delen!)
Beperkingen van deze benadering
Wiskundig gezien zou de code die we hebben gemaakt ons perfecte golvende vormen en patronen moeten geven, maar in werkelijkheid zullen we enkele vreemde resultaten tegenkomen. Dus ja, deze methode heeft zijn beperkingen. De online generator kan bijvoorbeeld slechte resultaten produceren, vooral bij golvende lijnen. Een deel van het probleem is te wijten aan een bepaalde combinatie van waarden waarbij het resultaat wordt vervormd, zoals het gebruik van een grote waarde voor de randdikte in vergelijking met de grootte:
In de andere gevallen is het een kwestie van afronding die resulteert in een verkeerde uitlijning en openingen tussen de golven:
Dat gezegd hebbende, denk ik nog steeds dat de methode die we hebben behandeld een goede blijft, omdat het in de meeste gevallen vloeiende golven produceert, en we kunnen de slechte resultaten gemakkelijk vermijden door met verschillende waarden te spelen totdat we het perfect hebben.
Afsluiten
Ik hoop dat je na dit artikel niet meer met vallen en opstaan zult rommelen om een golvende vorm of patroon te bouwen. In aanvulling naar de online generator, je hebt alle wiskundige geheimen achter het maken van elke gewenste golf!
Het artikel eindigt hier, maar nu heb je een krachtig hulpmiddel om mooie ontwerpen te maken met golvende vormen. Hier is inspiratie om je op weg te helpen…
En jij dan? Gebruik mijn online generator (of schrijf de code handmatig als je alle wiskunde al uit je hoofd hebt geleerd) en laat me je creaties zien! Laten we een goede verzameling hebben in het commentaargedeelte.
