Galaksiliukuväri: kosmiset koodit syvään avaruuteen

Galaksiliukuväri on pehmeää tähtisumun väriä lähes mustasta pohjasta hehkuen: violetteja, magentoja, petrooleja tai hiillospilviä, jotka häipyvät syvään avaruuteen. Päällä on usein ripaus pieniä tähtiä. Salaisuus on mittasuhteissa. Oikeat avaruuskuvat ovat enimmäkseen tummia, ja väri asuu yhdessä tai kahdessa pilvessä koko kuvan sijaan. Alta löydät tärkeimpien tähtisumuperheiden kopioitavat koodit ja kokonaisen kerrostetun tähtikentän CSS:llä.

Mikä saa liukuvärin näyttämään galaksilta

Violetin sekoitus siniseen on vain violetti liukuväri. Se alkaa näyttää avaruudelta, kun siinä on neljä tähtitieteen kuvista odotettua asiaa:

• Lähes musta pohja, joka taittuu hieman siniseen tai violettiin neutraalin sijaan.
• Tähtisumupilvet, jotka hehkuvat kirkkaasta ytimestä ja häipyvät epätasaisesti. Tämä on säteittäisten liukuvärien tehtävä.
• Kirkkaampi ydin kirkkaimman pilven sisällä: vaaleanpunainen, lila tai kermanvärinen, lähellä valkoista.
• Tähdet: paljon pieniä valkoisia ja vaaleansinisiä pisteitä, muutama suurempi, siroteltuina ilman kuviota.

Galaksiliukuvärin koodit

Jokainen näistä on yksittäinen säteittäinen liukuväri, jonka voit liittää suunnittelutyökaluun tai tyylitiedostoon. Paino on tarkoituksella tummassa päässä. Violetti on klassinen avaruusliukuväri, petrooli tuntuu kylmemmältä ja tieteellisemmältä, hiillos kuolevalta tähdeltä tai tieteisjulisteelta.

Jos haluat lähemmäs kotia, syvän avaruuden sijaan taivaan tähtineen ja kuineen, yötaivaan liukuvärikoodit ovat lempeämpiä. Vihreän ja violetin valon verhot löydät revontuliliukuväreistä.

Galaksitausta CSS:llä kerros kerrokselta

Yksi liukuväri antaa tähtisumun. Galaksi syntyy useiden pinoamisesta. CSS sopii siihen hyvin, koska background-image hyväksyy listan. Ensimmäinen listattu kerros piirretään päälle.

1. 1

   Aseta pohja

   Leveä säteittäinen liukuväri keskiosan tyhjyyden indigosta reunojen syvään avaruuteen estää kuvaa näyttämästä tasaiselta.

2. 2

   Lisää päätähtisumu

   Värillinen säteittäinen liukuväri häipyy transparent-arvoon ja sijoitetaan pois keskeltä, suunnilleen kolmanneslinjojen risteykseen.

3. 3

   Lisää toinen pienempi pilvi

   Eri sävy kauas ensimmäisestä pienemmällä peittävyydellä. Se lisää syvyyttä kilpailematta huomiosta.

4. 4

   Sirottele tähdet

   Pienet säteittäiset pisteet toistuvat kahdessa tai kolmessa koossa, jotta toistot eivät asetu näkyväksi ruudukoksi.

5. 5

   Viimeistele rakeisuudella

   Hento kohinakerros kaiken päällä peittää tummien alueiden raidat ja tekee ilmeestä valokuvamaisen.

.galaxy {
  min-height: 100vh;
  background-color: #03020a;
  background-image:
    /* stars, tiled at three scales */
    radial-gradient(circle at 20% 30%, #ffffff 0 1px, transparent 1.5px),
    radial-gradient(circle at 70% 80%, #dbeafe 0 1px, transparent 1.5px),
    radial-gradient(circle at 45% 60%, #ffffff 0 1.5px, transparent 2px),
    /* nebulae */
    radial-gradient(ellipse at 30% 40%, rgb(192 38 211 / 0.55) 0%, transparent 45%),
    radial-gradient(ellipse at 75% 25%, rgb(45 212 191 / 0.3) 0%, transparent 40%),
    /* ground */
    radial-gradient(ellipse at 50% 45%, #1a1240 0%, #0a0820 50%, #03020a 100%);
  background-size:
    180px 180px,
    260px 260px,
    420px 420px,
    100% 100%,
    100% 100%,
    100% 100%;
}

Säteittäinen syntaksi, kuten ellipse 60% 25% ja väripisteiden paikat, selitetään CSS:n säteittäisessä liukuvärissä. Rakeisuuteen CSS-kohinatekstuuri tarjoaa kopioitavan SVG-suodatinratkaisun.

Galaksiliukuvärin pitäminen puhtaana

Tavallisin epäonnistuminen on mustelmalta näyttävä galaksi: päällekkäiset värit sekoittuvat ruskeaksi tai harmaaksi ja väri leviää niin tasaisesti, ettei mikään hehku. Hehku tarvitsee ympärilleen pimeyttä. Korjaus on lähes aina vähemmän väriä huolellisemmin sijoitettuna. Taustalla oleva väriteoria löytyy sameista liukuväreistä.

Sanat galaksitaustalla

Galaksitausta sopii valkoiselle tai hyvin vaalealle tekstille, parhaiten kuvan tummassa osassa eikä tähtisumun kirkkaassa ytimessä. Aseta otsikko tyhjään tilaan ja pilvi toiselle puolelle. Tähdet pienen tekstin takana ovat todellinen ongelma: ne näyttävät irrallisilta pisteiltä. Pidä leipätekstin tausta vapaana suuremmista tähdistä tai jätä alueelta tähdet kokonaan pois.

Tällaista tasapainoa Gradiently hallitsee itse. Mark tietää sanojen paikan, siirtää rauhallisimman ja parhaiten erottuvan alueensa niiden taakse sekä vähentää levotonta yksityiskohtaisuutta kirjainten lähellä. Kosminen tausta ei siis niele otsikkoa. Markeissa voi olla myös hidasta liikettä, mikä sopii galaksiin paremmin kuin pysäytyskuva.

Missä galaksiliukuvärit toimivat parhaiten

Pelaaminen ja striimaus ovat luontevia käyttökohteita. Twitch-striimaajan brändäys näyttää saman ilmeen säilyttämisen paneeleissa, bannereissa ja päällysteissä. Lisää hehkuvia tummia pohjia löydät tummista liukuväritaustoista.