Revontuliliukuvärit: pehmeää valoa, tehtynä oikein

Revontuliliukuväri on tausta, jossa pehmeä, hohtava väri leijuu tumman pohjan päällä kuin revontulet: vihreän, petroolin ja violetin verhoja, jotka näyttävät hehkuvan eivätkä istuvan pinnalla. Teknisesti se on joukko voimakkaasti sumennettuja väriläiskiä tai kaistoja lähes mustalla pohjalla, usein hyvin hitaasti liikkuvina. Se on yksi tunnelmallisimmista liukuvärin ilmeistä ja yksi helpoimmin liioiteltavista.

Mikä tekee revontuliliukuvärin erilaiseksi

Kolme asiaa erottaa revontulen tavallisesta tummasta liukuvärista. Ensinnäkin pohja on hyvin tumma, lähes musta, joten mikä tahansa sen päällä oleva väri näyttää valolta. Toiseksi väri tulee pehmeinä, epätasaisina verhoina tai läiskinä eikä sileänä siirtymänä puolelta toiselle. Kolmanneksi reunat on sumennettu äärimmäisen paljon, joten millään ei ole muotoa, jota voisi jäljittää. Yhdessä ne luovat vaikutelman valosta ilmassa eikä maalista seinällä.

Revontulipaletit, jotka toimivat

Oikeat revontulet saavat värinsä ilmakehän korkealla olevista kaasuista: happi antaa tutun vihreän ja korkeammalla syvän punaisen, kun taas typpi lisää sinisiä ja violetteja. Tämän perheen lähellä pysyminen on syy, miksi jotkin revontuliliukuvärit näyttävät luonnollisilta ja toiset yökerholta. Aloita vihreällä tai petroolilla, lisää violetti ja käytä ruusua tai punaista harvinaisena korostuksena.

Luonnosta voi tietenkin poiketa. Lämpimät revontulet meripihkassa ja korallissa tai yksiväriset yhdessä sinisessä toimivat molemmat, kunhan pohja pysyy tummana ja värit naapureina. Yhteen sopivien värien valinnasta lisää artikkelissa analogiset värit.

Miten estät revontulen näyttämästä näytönsäästäjältä

Pimeys on tärkein ainesosa. Revontuli tarvitsee enemmän tummaa kuin valaistua aluetta, koska hehku erottuu vain sitä vasten. Sama pimeys on paikka, jossa raidoittuminen näkyy ensin: pitkät, hienovaraiset siirtymät tummasta petroolista mustaan porrastuvat näkyvästi useimmilla näytöillä. Hieno rake korjaa sen, kuten liukuvärien raidoittuminen ja tummat liukuväritaustat selittävät.

Miten rakennat revontuliliukuvärin CSS:llä

Tavallinen tekniikka on muutama säteittäinen liukuväri, jotka on muotoiltu leveiksi, litteiksi ellipseiksi ja sumennettu yhteen ylisuurella kerroksella sisällön takana. Pseudoelementin sumentaminen maksaa enemmän kuin tavallinen liukuväri, joten pidä kerrosten määrä pienenä ja animaatio hitaana ja pysäytä liike niille, jotka suosivat vähennettyä liikettä.

.aurora {
  position: relative;
  overflow: hidden;
  background: #030712;
}

.aurora::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 40% 22% at 30% 30%, #34d399cc, transparent 70%),
    radial-gradient(ellipse 35% 20% at 62% 26%, #22d3eeaa, transparent 70%),
    radial-gradient(ellipse 30% 18% at 52% 48%, #8b5cf699, transparent 70%);
  filter: blur(40px);
  animation: aurora-drift 30s ease-in-out infinite alternate;
}

.aurora > * {
  position: relative; /* keep content above the light */
}

@keyframes aurora-drift {
  to { transform: translate3d(4%, -3%, 0) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before { animation: none; }
}

Liukuvärien sujuvasta animoinnista lisää artikkelissa animoidut liukuväritaustat. Liikeasetusten kunnioittamisesta katso vähennetty liike.

Typografia revontulella

Revontulitaustat ovat anteliaita typografialle, koska suurin osa ruudusta on tumma. Aseta vaalea teksti tummimmalle alueelle ja pidä kirkkain verho kaukana sanoista. Virhe on keskittää hehku ja otsikko yhdessä, jolloin kirjaimet ovat alueella, jossa on vähiten kontrastia.

Mihin revontuliliukuvärit sopivat

• Musiikki-, uni-, meditaatio- ja hyvinvointibrändit, joissa rauhallinen valo sopii tuotteeseen
• Yötapahtumat, planetaariot, tähtitiede ja matkailu pohjoisiin paikkoihin
• Teknologialanseeraukset, jotka haluavat tunnelmaa ilman neonia
• Taustakuvat ja lukitusnäytöt, katso liukuvärintaustakuva
• Silmukkana toistuvat videotaustat, joissa hidas ajelehtiminen on koko pointti

Se sopii huonommin sinne, missä ihmisten täytyy lukea paljon tai verrata lukuja. Kojelaudat, hintataulukot ja pitkät artikkelit tarvitsevat hiljaisen, tasaisen pinnan, ja niiden takana ajelehtiva hehku muuttuu häiriöksi. Se myös taistelee kirkkaita, päiväaikaisia brändejä vastaan: napayöhön kääritty leipomo tai lastenleluliike näyttää oudolta. Näissä tapauksissa lainaa vain pehmeys, yhtenä vaaleana hehkuna vaalealla pohjalla.

Koska revontuli riippuu hitaasta liikkeestä, se on parhaimmillaan silmukkana eikä still-kuvana. Gradientlyssä lunastamallasi Markilla tehdyt suunnitelmat voi viedä viidestä 30 sekuntiin kestävinä saumattomina silmukoina, joiden liikkeen ja tahdin valitset.