Bakgrund som anpassar sig efter text: så gör en Mark plats

En Gradiently-Mark är en bakgrund som anpassar sig efter text. Eftersom den ritas live i stället för att sparas som en bild vet den var dina ord finns och ordnar om sig runt dem: materialets lugnaste, mest kontrastrika del flyttar sig bakom texten, färger nära bokstäverna fördjupas eller ljusnar och stökiga detaljer dämpas. Inget läggs ovanpå. Det finns inga rutor, inga skuggor och ingen oskärpa, så du behåller hela bakgrunden och orden går ändå att läsa.

De vanliga sätten att göra text läsbar och vad de kostar

Lägg en rubrik på en livlig gradient eller ett foto och en del av den försvinner. De vanliga lösningarna fungerar alla genom att täcka över bakgrunden, vilket är ett märkligt resultat när bakgrunden var anledningen till att du valde designen.

Varje lösning har sin plats på en platt bild, och text på en gradientbakgrund går igenom dem ärligt. Skillnaden med en Mark är att bakgrunden är med och spelar i stället för att maskeras.

Vad en Mark gör runt dina ord

1. 1

   Den lägger sig till rätta

   Materialet förskjuts så att orden hamnar på dess lugnaste del. Ljus som annars hade legat bakom rubriken glider ut i det öppna utrymmet runt den.

2. 2

   Den byter ton

   Nära bokstäverna glider paletten mot en färg som kontrasterar mot texten: djupare bakom ljust bläck, ljusare bakom mörkt bläck.

3. 3

   Den lugnar sig

   Förvrängning, stök och fina detaljer dämpas bakom orden, så en kraftig struktur aldrig skär genom ett tunt streck.

4. 4

   Den böjer sig runt kanterna

   Mönster kröker sig lätt vid ordens kant i stället för att löpa rakt genom dem.

Reaktionen arbetar hand i hand med Auto-bläck, som väljer Markens ljusa eller mörka bläck för varje rad. Bakgrunden gör plats; Auto-bläck väljer rätt färg att fylla den med.

Välj hur kraftigt bakgrunden svarar

Du bestämmer hur mycket Marken viker undan. Panelen för det heter Kring dina ord, och den börjar med fem nivåer.

Under nivåerna finns fyra rattar för finjustering: Ton styr hur långt materialet lägger sig bakom orden för kontrastens skull, Lugn hur mycket förvrängning och stök som dämpas, Böjning hur mycket mönstret kröker sig vid ordens kant, och Räckvidd om det följer varje bokstav eller svarar runt hela textblocket.

Varför det spelar roll i varje storlek

En platt bakgrundsbild läggs ut en gång. Beskär den till en story och den ljusa fläcken kan hamna precis bakom rubriken. En Mark ritas på nytt för varje format, så när en design går från inlägg till story till banner flyttar sig orden och Marken gör plats igen var de än hamnar. Det är det som gör att en look fungerar i alla storlekar.

En enkel version av idén i CSS

På webben kan du låna principen med en vanlig gradient: lägg bakgrundens djupaste, lugnaste del där din text sitter och låt färgen ligga ute vid kanterna. Den följer inte orden när layouten ändras, men den slår en ruta.

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

När du ska sänka reaktionen

Alla designer vill inte ha maximal läsbarhet. En mobilbakgrund har inga ord alls, så Av är rätt. Stora displaybokstäver, ett enda ord över en affisch, klarar sig själva och ser ofta bättre ut med Osynlig. Bokstavsbehandlingar som Kontur eller Extrudering, som tas upp i bokstavseffekter, bär redan sin egen kontrast. Spara de starka nivåerna till jobb som kräver dem: finstilt, långa detaljer och allt som läses i all hast.