Hohtoefekti: pehmeää valoa ilman kehää tekstin ympärillä

Hohtoefekti on valoläikkä: kirkas väriydin häipyy hitaasti tummempaan ympäristöön, kuin lamppu olisi aivan pinnan takana. Hyvin käytettynä se lisää litteään sommitelmaan syvyyttä ja vetää katseen tuotteeseen, painikkeeseen tai muotoon. Huonosti käytettynä se on sumea rengas otsikon ympärillä. Tämän sivun sääntö on yksinkertainen: sijoita hohto muotoihin ja taustoihin ja pidä sanat terävinä.

Mihin hohto kuuluu

Valo esineen ympärillä kertoo sen tärkeydestä. Kirjainten ympärillä se tekee muuta: pehmentää reunoja, vähentää viivan ja taustan kontrastia ja saa rivin näyttämään epätarkalta pienellä näytöllä. Sijoita hohto sanojen lähelle, älä niiden ympärille. Jos teksti tarvitsee apua luettavuuteen, korjaa sen takainen alue. Vaihtoehdot tekstivarjolle esittelee siistimmät keinot.

Hohtavat taustat ja niiden koodit

Helpoimmassa hohtavassa taustassa säteittäinen liukuväri alkaa kirkkaana, laskee nopeasti syvemmän välisävyn kautta ja häipyy lähes mustaan pohjaan. Keskipisteen siirto sivuun saa sen tuntumaan valonlähteeltä maalitaulun sijaan.

Jokaisessa on kolme osaa: lähes valkoinen tai hyvin vaalea ydin, kylläinen välipysäkki ja saman väriperheen syvä pohja. Ilman välipysäkkiä hohto näyttää harmaalta kohdatessaan tumman, kuten sameat liukuvärit selittää. Muodosta kertoo lisää säteittäinen liukuväri.

Tee hohdosta aidon valon näköinen

1. 1

   Aloita tummasta tai hillitystä pohjasta

   Valo tarvitsee pimeyttä näkyäkseen. Sinimusta, syvä vihreä tai murrettu paperisävy toimii; kirkas valkoinen ei anna hohdolle tilaa.

2. 2

   Anna ytimelle vaaleampi, lämpimämpi sävy

   Aito valo on keskeltä kirkkaimmillaan ja vähiten kylläistä. Tee ytimestä hohdon vaalea versio, esimerkiksi #fde68a oranssille hohdolle.

3. 3

   Anna valon hiipua hitaasti

   Häivytyksen tulee kattaa laaja alue, usein puolet kuvasta. Lyhyt häivytys näyttää saksilla leikatulta valokeilalta.

4. 4

   Päätä valon tulosuunta

   Sijoita ydin reunan tai kulman lähelle tai valaistavan esineen taakse. Pidä muu sommitelma tämän suunnan mukaisena.

5. 5

   Lisää hienoa rakeisuutta

   Raidoittuminen näkyy selvimmin pitkissä tummissa häivytyksissä. Kevyt kohinakerros peittää sävyaskelia; menetelmä löytyy rakeisista liukuväreistä.

Kokeile vielä poistaa hohto ja katsoa uudelleen. Jos sommitelma toimii yhä, hohto lisää tunnelmaa. Jos kokonaisuus hajoaa, hohto tekee sommittelun tai kontrastin tehtävää.

Hohtoefekti CSS:llä

Verkossa on kolme luotettavaa tapaa tehdä hohto. Nollasiirtymäinen, laajasti sumennettu box-shadow valaisee kortin tai painikkeen reunat. Pseudoelementin säteittäinen liukuväri tekee pehmeän valoläikän esineen taakse. Värillisen muodon filter: blur() tuottaa pehmeimmän tuloksen suuremmalla renderöintikustannuksella. MDN:n box-shadow-ohje luettelee kaikki arvot.

/* 1. A button that glows at its edges */
.button-glow {
  background: #7c3aed;
  color: #ffffff;
  box-shadow:
    0 0 0 1px rgb(196 181 253 / 0.4),
    0 0 24px rgb(124 58 237 / 0.55),
    0 0 64px rgb(124 58 237 / 0.25);
}

/* 2. A pool of light behind a product image */
.product {
  position: relative;
  isolation: isolate;
}
.product::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%, rgb(253 230 138 / 0.9), rgb(249 115 22 / 0.35) 35%, transparent 70%);
}

/* 3. A blurred orb in a hero background */
.orb {
  position: absolute;
  width: 480px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0891b2;
  filter: blur(120px);
  opacity: 0.6;
  pointer-events: none;
}

Pidä painikkeen hohto hienovaraisena ja teksti terävänä: valo kuuluu painikkeen muotoon, ei sanoihin. Täydet asetukset löytyvät CSS-laatikkovarjosta.

Hohto julkaisuissa, julisteissa ja tarinoissa

Still-kuvassa hohto toimii parhaiten kohteen takana tai kuvan tyhjällä puoliskolla. Aseta valo kohtaan, johon katseen tulee osua ensin, ja otsikko pohjan tummempaan, rauhallisempaan osaan. Valo johdattaa lukijan sanoihin koskematta niihin.

Juuri tämän Gradientlyn Mark tekee itsestään. Sen rauhallisin alue asettuu sanojen taakse, kirjainten lähellä värit syvenevät tai vaalenevat ja Automaattinen muste valitsee rivikohtaisesti vaalean tai tumman tekstin Markin paletista. Laatikoita, varjoja tai kehiä ei tarvitse lisätä. Automaattinen muste näyttää ajatuksen käytännössä.

Hohto, neon ja valovuodot vertailussa

Nämä kolme sekoittuvat helposti. Hohto on pehmeää, laajaa valoa yhdestä lähteestä. Neonliukuvärit ovat kylläisiä, sähköisiä värejä, joiden keskellä on ohut kirkas viiva, lähempänä valokylttiä. Valovuodot ovat filmimäisiä lämpimiä juovia, jotka tulevat yleensä reunasta. Kaikki kolme tarvitsevat tumman pohjan ja pysyvät poissa tekstistä. Jos haluat valon ajelehtivan ja muuttuvan, revontuliliukuvärit ovat niiden liikkuva sukulainen.