Kuidas luua CSS-is lainelisi kujundeid ja mustreid

Laine on ilmselt üks CSS-i kõige keerulisemaid kujundeid. Püüame seda alati lähendada selliste omadustega nagu border-radius ja palju maagilisi numbreid, kuni saame midagi, mis tundub kuidagi lähedane. Ja seda enne, kui jõuame lainelistesse mustritesse, mis on keerulisemad.

"SVG see!" võite öelda ja tõenäoliselt on teil õigus, et see on parem viis. Kuid me näeme, et CSS võib tekitada ilusaid laineid ja selle kood ei pea olema hull. Ja arva ära mis? mul on võrgugeneraator et see oleks veelgi triviaalsem!

Kui mängite generaatoriga, näete, et CSS, mille see välja sülitab, on ainult kaks gradienti ja CSS-i maski omadus – need kaks asja ja me saame luua mis tahes lainekuju või mustri. Rääkimata sellest, et me saame hõlpsalt kontrollida lainete suurust ja kumerust.

Mõned väärtused võivad välja näha nagu "maagilised numbrid“, kuid tegelikult on nende taga loogika ja me lahkame koodi ja avastame kõik lainete loomise saladused.

See artikkel on järg eelmine kuhu ehitasin igasuguseid erinevaid sik-sak-, skoobi-, kamm- ja jah, lainelisi ääriseid. Soovitan tungivalt seda artiklit kontrollida, kuna see kasutab sama tehnikat, mida siin käsitleme, kuid üksikasjalikumalt.

Matemaatika lainete taga

Rangelt võttes ei ole laineliste kujundite taga ühtki maagilist valemit. Mis tahes kujundit, mille kõverad lähevad üles ja alla, võib nimetada laineks, nii et me ei piirdu keerulise matemaatikaga. Selle asemel reprodutseerime laine, kasutades geomeetria põhitõdesid.

Alustame lihtsa näitega, kasutades kahte ringikuju:

Meil on kaks sama raadiusega ringi kõrvuti. Kas sa näed seda punast joont? See katab esimese ringi ülemise poole ja teise ringi alumise poole. Kujutage nüüd ette, et võtate selle rea ja kordate seda.

Me juba näeme lainet. Nüüd täidame alumise osa (või ülemise), et saada järgmine:

Tada! Meil on laineline kuju, mida saame juhtida ühe ringi raadiuse muutujaga. See on üks lihtsamaid laineid, mida saame teha, ja see on see, millega ma ennast näitasin this Eelmine artikkel

Lisame veidi keerukust, võttes esimese illustratsiooni ja liigutades ringe veidi:

Meil on endiselt kaks sama raadiusega ringi, kuid need ei ole enam horisontaalselt joondatud. Sel juhul ei kata punane joon enam poolt iga ringi pindalast, vaid hoopis väiksemat ala. Seda ala piirab katkendlik punane joon. See joon ületab punkti, kus mõlemad ringid kohtuvad.

Nüüd võtke see joon ja korrake seda ning saate uue laine, sujuvama.

Ma arvan, et saate ideest aru. Ringide asukohta ja suurust reguleerides saame luua mis tahes laine, mida tahame. Võime isegi nende jaoks luua muutujaid, mida ma kutsun P ja S, Vastavalt.

Tõenäoliselt olete märganud, et võrgugeneraatoris juhime lainet kahe sisendi abil. Need vastavad ülaltoodud muutujatele. S on "laine suurus" ja P on "laine kõverus".

Mina olen määratlemas P as P = m*S kus m on muutuja, mida kohandate laine kõveruse värskendamisel. See võimaldab meil alati sama kumerust, isegi kui värskendame S.

m võib olla mis tahes väärtus vahel 0 ja 2. 0 annab meile esimese konkreetse juhtumi, kus mõlemad ringid on joondatud horisontaalselt. 2 on omamoodi maksimumväärtus. Võime minna suuremaks, kuid pärast mõnda katset avastasin, et midagi eespool 2 tekitab halbu, lamedaid kujundeid.

Ärgem unustagem oma ringi raadiust! Seda saab määratleda ka kasutades S ja P nagu nii:

R = sqrt(P² + S²)/2

Kui P on võrdne 0, me saame R = S/2.

Meil on kõik olemas, et hakata seda kõike CSS-is gradientideks teisendama!

Gradientide loomine

Meie lained kasutavad ringe ja ringidest rääkides räägime radiaalsetest gradientidest. Ja kuna kaks ringi määratlevad meie laine, kasutame loogiliselt kahte radiaalset gradienti.

Alustame konkreetse juhtumiga, kus P on võrdne 0. Siin on esimese gradiendi illustratsioon:

See gradient loob esimese kumeruse, täites samal ajal kogu põhjaala - nii-öelda laine "vee".

.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;
}

. --size muutuja määrab radiaalse gradiendi raadiuse ja suuruse. Kui võrrelda seda S muutuja, siis on see võrdne S/2.

Nüüd lisame teise gradiendi:

Teine gradient pole midagi muud kui ring meie laine lõpuleviimiseks:

radial-gradient(var(--size) at 50% var(--size), blue 99%, #0000 101%) 
  calc(50% - 2*var(--size)) 0/calc(4 * var(--size)) 100%

Kui teil vaadata eelmine artikkel näete, et ma lihtsalt kordan seda, mida ma seal juba tegin.

Järgisin mõlemat artiklit, kuid gradiendi konfiguratsioonid ei ole samad.

Seda seetõttu, et erinevate gradiendi konfiguratsioonide abil saame sama tulemuseni jõuda. Mõlema konfiguratsiooni võrdlemisel märkate joonduses väikest erinevust, kuid trikk on sama. See võib tekitada segadust, kui te pole gradientidega tuttav, kuid ärge muretsege. Mõne harjutamisega harjute nendega ära ja avastate ise, et erinev süntaks võib viia sama tulemuseni.

Siin on meie esimese laine täielik kood:

.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;
}

Nüüd võtame selle koodi ja kohandame seda nii, et tutvustame muutujat, mis muudab selle täielikult taaskasutatavaks mis tahes soovitud laine loomiseks. Nagu eelmises jaotises nägime, on peamine trikk ringide liigutamine nii, et need ei oleks enam joondatud, nii et värskendame igaühe asukohta. Me liigutame esimese üles ja teise alla.

Meie kood näeb välja selline:

.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;
}

Võtsin kasutusele uue --p muutuja, mida kasutatakse iga ringi keskpunkti määramiseks. Esimene gradient on kasutusel 50% calc(-1*var(--p)), nii et selle keskpunkt liigub teise kasutamise ajal üles calc(var(--size) + var(--p)) selle alla liigutamiseks.

Demo on väärt tuhat sõna:

Ringid ei ole joondatud ega puuduta üksteist. Asetasime need üksteisest kaugele, muutmata nende raadiust, nii et kaotasime oma laine. Kuid me saame asju parandada, kasutades sama matemaatikat, mida kasutasime varem uue raadiuse arvutamiseks. Mäleta seda R = sqrt(P² + S²)/2. Meie puhul --size on võrdne S/2; sama jaoks --p mis on samuti võrdne P/2 kuna liigutame mõlemat ringi. Seega on nende keskpunktide vaheline kaugus kahekordne väärtus --p selle jaoks:

R = sqrt(var(--size) * var(--size) + var(--p) * var(--p))

See annab meile tulemuse 55.9px.

Meie laine on tagasi! Ühendame selle võrrandi meie CSS-iga:

.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;
}

See on kehtiv CSS-kood. sqrt() on osa spetsifikatsioonist, kuid hetkel, mil ma seda kirjutan, pole sellele brauseri tuge. See tähendab, et vajame selle väärtuse arvutamiseks piserdamist JavaScripti või Sassi, kuni saame laiemaks sqrt() Tugi.

See on päris lahe: piisab kahest gradiendist, et saada lahe laine, mida saate rakendada mis tahes elemendile, kasutades mask vara. Enam pole vaja katse-eksitusi – kõik, mida vajate, on värskendada kahte muutujat ja oletegi valmis!

Laine ümberpööramine

Mis siis, kui tahame, et lained liiguksid teises suunas, kus me täidame "vee" asemel "taeva". Uskuge või mitte, me peame ainult värskendama kahte väärtust:

.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;
}

Kõik, mida ma seal tegin, lisasin nihke, mis on võrdne 100%, ülal esile tõstetud. Siin on tulemus:

Võime kaaluda sõbralikumat süntaksit, kasutades märksõna väärtusi, et muuta see veelgi lihtsamaks:

.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;
}

Me kasutame left ja bottom märksõnu külgede ja nihke määramiseks. Vaikimisi on brauseris vaikimisi left ja top — sellepärast me kasutame 100% elemendi allapoole teisaldamiseks. Tegelikkuses liigume selle välja top by 100%, seega on see tegelikult sama, mis öelda bottom. Palju lihtsam lugeda kui matemaatikat!

Selle uuendatud süntaksiga peame vaid vahetama bottom eest top — või vastupidi — laine suuna muutmiseks.

Ja kui soovite saada nii ülemist kui ka alumist laineid, ühendame kõik gradiendid ühte deklaratsiooni:

.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;
}

Kui kontrollite koodi, näete, et lisaks kõikide gradientide kombineerimisele olen vähendanud ka nende kõrgust alates 100% et 51% nii, et mõlemad katavad poole elemendist. jah, 51%. Vajame seda väikest lisaprotsenti väikese kattuvuse jaoks, mis väldib lünki.

Aga vasak ja parem pool?

See on sinu kodutöö! Võtke see, mida tegime ülemise ja alumise küljega, ja proovige väärtusi värskendada, et saada parem- ja vasakpoolsed väärtused. Ärge muretsege, see on lihtne ja ainus asi, mida peate tegema, on väärtusi vahetada.

Kui teil on probleeme, võite alati kasutada võrgugeneraator koodi kontrollimiseks ja tulemuse visualiseerimiseks.

Lainelised jooned

Varem tegime esimese laine punase joonega, seejärel täitsime elemendi alumise osa. Kuidas oleks selle lainelise joonega? See on ka laine! Veelgi parem on see, kui saame selle paksust muutujaga juhtida, et saaksime seda uuesti kasutada. Teeme seda!

Me ei alusta nullist, vaid võtame eelmise koodi ja värskendame seda. Esimene asi, mida teha, on värskendada gradientide värvipeatusi. Mõlemad gradiendid algavad läbipaistvast värvist läbipaistmatuni või vastupidi. Joone või äärise simuleerimiseks peame alustama läbipaistvast, minema läbipaistmatusse ja seejärel uuesti läbipaistvasse:

#0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%

Ma arvan, et sa juba arvasid, et --b muutuja on see, mida me kasutame joone paksuse reguleerimiseks. Rakendame seda oma gradientidele:

Jah, tulemus pole kaugeltki laineline joon. Kuid tähelepanelikult vaadates näeme, et üks gradient loob õigesti põhjakõveruse. Niisiis, kõik, mida me tõesti peame tegema, on teise gradiendi parandamine. Täisringi hoidmise asemel tehkem osaline gradient nagu teine.

Veel kaugel, kuid meil on mõlemad vajalikud kumerused! Kui kontrollite koodi, näete, et meil on kaks identset gradienti. Ainus erinevus on nende paigutus:

.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%;
}

Nüüd peame lõpliku kuju jaoks kohandama suurust ja asukohta. Me ei vaja enam, et gradient oleks täiskõrgusega, nii et saame selle asendada 100% sellega:

/* Size plus thickness */
calc(var(--size) + var(--b))

Selle väärtuse taga pole matemaatilist loogikat. See peab olema ainult kumeruse jaoks piisavalt suur. Näeme selle mõju mustrile mõne aja pärast. Vahepeal värskendame ka positsiooni, et kalded vertikaalselt tsentreerida:

.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;
}

Pole ikka veel päris kohal:

Üks gradient peab liikuma natuke alla ja teine ​​natuke üles. Mõlemad peavad liikuma poole võrra oma pikkusest.

Oleme peaaegu kohal! Raadiuse täiuslikuks kattumiseks vajame väikest parandust. Mõlemad jooned peavad olema nihkes poole piiri võrra (--b) paksus:

Me saime selle! Täiuslik laineline joon, mida saame hõlpsalt reguleerida, kontrollides mõnda muutujat:

.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;
}

Ma tean, et loogikast tuleb natuke aru saada. See on hea ja nagu ma ütlesin, pole CSS-is lainelise kuju loomine lihtne, rääkimata selle taga olevast keerulisest matemaatikast. Sellepärast on võrgugeneraator on elupäästja — saate hõlpsalt lõpliku koodi kätte isegi siis, kui te ei mõista selle loogikat täielikult.

Lainelised mustrid

Äsja loodud lainerijoonest saame teha mustri!

Oh ei, mustri koodist on veelgi raskem aru saada!

Üldse mitte! Kood on meil juba olemas. Kõik, mida peame tegema, on eemaldada repeat-x sellest, mis meil juba on, ja tada. 🎉

Mõnus laineline muster. Kas mäletate võrrandit, mille kohta ütlesin, et vaatame uuesti?

/* Size plus thickness */
calc(var(--size) + var(--b))

Noh, see määrab mustri joonte vahelise kauguse. Me saame sellest muutuja teha, kuid pole vaja rohkem keerukust. Ma isegi ei kasuta selleks generaatoris muutujat. Võib-olla muudan seda hiljem.

Siin on sama muster teises suunas:

Ma annan teile selle demo koodi, kuid ma soovin, et te seda lahkaksite ja mõistaksite, milliseid muudatusi ma selle tegemiseks tegin.

Koodi lihtsustamine

Kõigis eelmistes demodes defineerime alati --size ja --p iseseisvalt. Kuid kas mäletate, kuidas ma varem mainisin, et võrgugeneraator hindab P kui võrdne m*S, Kus m kontrollib laine kõverust? Fikseeritud kordaja defineerimisega saame töötada ühe kindla lainega ja kood võib muutuda lihtsamaks. See on see, mida me enamikul juhtudel vajame: konkreetset lainelist kuju ja muutujat selle suuruse juhtimiseks.

Värskendame oma koodi ja tutvustame m muutuja:

.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;
  }

Nagu näete, ei vaja me enam --p muutuv. Asendasin selle vastu var(--m)*var(--size)ja optimeeris osa matemaatikast vastavalt. Nüüd, kui tahame töötada konkreetse lainelise kujuga, võime selle välja jätta --m muutuja ja asendada see fikseeritud väärtusega. Proovime .8 näiteks.

--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;

Vaadake, kuidas kood on nüüd lihtsam? Ainult üks muutuja oma laine juhtimiseks, lisaks pole teil vaja enam loota sqrt() millel pole brauseri tuge!

Saate rakendada sama loogikat kõikidele demodele, mida nägime isegi laineliste joonte ja mustri puhul. Alustasin üksikasjaliku matemaatilise selgitusega ja andsin üldise koodi, kuid tegelikus kasutuses võib tekkida vajadus lihtsama koodi järele. Seda ma teen kogu aeg. Üldist koodi kasutan harva, kuid kaalun alati lihtsustatud versiooni, eriti kuna enamikul juhtudel kasutan mõnda teadaolevat väärtust, mida pole vaja muutujatena salvestada. (Spoileriteade: Lõpus jagan paar näidet!)

Selle lähenemisviisi piirangud

Matemaatiliselt peaks meie loodud kood andma meile täiuslikud lainelised kujundid ja mustrid, kuid tegelikkuses näeme silmitsi kummaliste tulemustega. Niisiis, jah, sellel meetodil on oma piirangud. Näiteks on võrgugeneraator võimeline andma halbu tulemusi, eriti laineliste joontega. Osa probleemist on tingitud teatud väärtuste kombinatsioonist, mille puhul tulemust segatakse, näiteks äärise paksuse suure väärtuse kasutamine võrreldes suurusega:

Muudel juhtudel on probleem, mis on seotud ümardamisega, mis põhjustab lainete ebaühtlust ja lünki:

Sellegipoolest arvan ma endiselt, et meie käsitletud meetod on endiselt hea, kuna see tekitab enamikul juhtudel sujuvaid laineid ja me saame kergesti vältida halbu tulemusi, mängides erinevate väärtustega, kuni saavutame selle täiuslikuks.

Pakke kuni

Loodan, et pärast seda artiklit ei pea te enam lainelise kuju või mustri loomiseks katse-eksituse meetodil koperdama. Lisaks võrgugeneraatorisse, teil on kõik matemaatika saladused mis tahes soovitud laine loomise taga!

Artikkel lõpeb siin, kuid nüüd on teil võimas tööriist lainelisi kujundeid kasutavate uhkete kujunduste loomiseks. Siin on inspiratsioon, et alustada…

Aga sina? Kasutage minu veebigeneraatorit (või kirjutage kood käsitsi, kui olete kogu matemaatika juba pähe õppinud) ja näidake mulle oma loomingut! Teeme kommentaaride jaotises hea kogumiku.