Tekstiin mukautuva tausta: näin Mark tekee tilaa

Gradientlyn Mark on tekstiin mukautuva tausta. Se piirretään reaaliajassa eikä tallennu pelkäksi kuvaksi, joten se tietää, missä sanasi ovat, ja järjestäytyy niiden ympärille. Materiaalin rauhallisin ja parhaan kontrastin tarjoava alue siirtyy tekstin taakse, värit kirjainten lähellä tummenevat tai vaalenevat ja levottomat yksityiskohdat rauhoittuvat. Taustan päälle ei lisätä mitään. Ei laatikoita, varjoja eikä sumennusta, joten koko tausta säilyy ja sanat erottuvat silti.

Tavalliset keinot parantaa luettavuutta ja niiden haitat

Aseta otsikko elävän liukuvärin tai valokuvan päälle, ja osa siitä katoaa taustaan. Tavalliset korjaukset peittävät taustaa, mikä tuntuu oudolta, jos juuri taustan vuoksi valitsit suunnitelman.

Jokaiselle korjaukselle on paikkansa tavallisessa kuvassa. Teksti liukuväritaustalla käsittelee niitä rehellisesti. Markin ero on siinä, että tausta osallistuu sen sijaan, että sitä peitettäisiin.

Mitä Mark tekee sanojesi ympärillä

1. 1

   Se asettuu

   Materiaali siirtyy niin, että sanasi asettuvat sen rauhallisimpaan kohtaan. Otsikon taakse muuten osuva valo siirtyy sen ympärillä olevaan tyhjään tilaan.

2. 2

   Se muuttaa sävyä

   Kirjainten lähellä paletti siirtyy kohti tekstistä erottuvaa väriä: vaalean musteen takana tummemmaksi ja tumman musteen takana vaaleammaksi.

3. 3

   Se rauhoittuu

   Vääristymät, levottomuus ja pienet yksityiskohdat rauhoittuvat sanojen takana, jotta voimakas tekstuuri ei kulje ohuen kirjainviivan läpi.

4. 4

   Se taipuu reunoilla

   Kuviot kaartuvat hieman sanojen reunalla sen sijaan, että kulkisivat suoraan niiden läpi.

Reagointi toimii yhdessä Automaattisen musteen kanssa. Se valitsee Markin vaalean tai tumman musteen jokaiselle riville. Tausta tekee tilan, ja Automaattinen muste valitsee siihen sopivan värin.

Valitse taustan reagoinnin voimakkuus

Päätät itse, kuinka paljon Mark antaa tilaa sanoille. Tätä varten on Sanojen ympärillä -paneeli, jossa on aluksi viisi tasoa.

Tasojen alla on neljä hienosäätöä: Sävy määrittää, kuinka paljon materiaalin sävy muuttuu sanojen takana kontrastin parantamiseksi. Rauhoitus vähentää vääristymiä ja levottomuutta. Taipuma määrittää, kuinka paljon kuvio kaartuu sanojen reunoilla. Ulottuvuus päättää, vaikuttaako reagointi aivan jokaisen kirjaimen vieressä vai koko tekstikappaleen ympärillä.

Miksi tämä auttaa kaikissa ko’oissa

Tavallinen taustakuva sommitellaan kerran. Kun rajaat sen tarinaksi, kirkas kohta voi osua suoraan otsikon taakse. Mark piirretään uudelleen jokaista muotoa varten, joten kun suunnitelma muuttuu julkaisusta tarinaksi ja banneriksi, sanatkin siirtyvät ja Mark tekee niille taas tilaa. Näin sama ilme toimii kaikissa ko’oissa.

Idean yksinkertainen toteutus CSS:llä

Verkossa voit soveltaa periaatetta tavalliseen liukuväriin: sijoita taustan tummin ja rauhallisin alue tekstin kohdalle ja jätä värit reunoille. Alue ei seuraa sanoja asettelun muuttuessa, mutta ratkaisu toimii paremmin kuin laatikko.

.hero {
  min-height: 70vh;
  display: grid;
  align-content: end;
  padding: 8vh 6vw;
  color: #fbf3ea;
  background: radial-gradient(
    ellipse 70% 45% at 35% 62%,
    #1b1030 0%,
    #2e1745 40%,
    #8a3f6e 75%,
    #f0a46f 100%
  );
}

Milloin reagointia kannattaa vähentää

Kaikki suunnitelmat eivät tarvitse parasta mahdollista luettavuutta. Puhelimen taustakuvassa ei ole sanoja, joten Pois on oikea valinta. Suuret näyttävät kirjaimet, kuten yksi sana koko julisteen leveydeltä, erottuvat usein sellaisinaan ja näyttävät paremmilta Huomaamaton-tasolla. Käyrät- ja Kohotettu-tyylisten kirjainkäsittelyjen oma kontrasti auttaa jo valmiiksi. Niitä käsitellään kirjaintehosteiden oppaassa. Säästä voimakkaat tasot tehtäviin, jotka tarvitsevat niitä: pieneen tekstiin, pitkiin tietoihin ja nopeasti luettavaan sisältöön.