80'er-æstetik: neon, krom og solnedgangsgradienter

80'er-æstetik er neon på sort, kromskrift, solnedgangsgradienter skåret i bånd og et glødende gitter, der løber mod horisonten, med en blødere side af Miami-pasteller og Memphis-mønstre. Det meste af nutidens udgave kommer fra synthwave, en stil, der fra 00'erne og frem genoplivede 1980'ernes film, arkadespil og synthesizermusik. Herunder finder du de vigtigste ingredienser, paletter med koder, CSS til en solnedgang og et gitter og vejen til at bruge det uden at ende i udklædning.

Ingredienserne i 80'er-æstetik

80'er-æstetik og synthwave

Synthwave, nogle gange kaldet outrun efter Segas arkadespil fra 1986, er en musikgenre, der voksede frem på nettet fra midten af 00'erne og låner kraftigt fra 80'er-filmmusik. Dens billedside definerede det look, mange nu forestiller sig: en mørkviolet himmel, en stribet sol, et magenta gitter og kromskrift. Filmen Drive fra 2011 og dens soundtrack hjalp med at bære stilen ind i mainstream.

Så når et brief siger 80'erne, så spørg, hvilke 80'ere. Synthwave-natten, Miami-pastellens dagslys og Memphis-mønstrene er tre forskellige looks. Synthwave-farver og vaporwave-farver går dybere i de to internetgenoplivelser, og Memphis-design tager mønstersiden.

Farvepaletter i 80'er-stil

Kromgradienten er den, du skal studere. Poleret metal spejler en lys himmel over en mørk jord, så farven går fra lys, bliver dybere mod midten, springer til mørk ved en skarp horisontlinje og lysner igen mod bunden. Den hårde linje får det til at ligne metal og ikke gråt. Krom-teksteffekter viser, hvordan du bruger den på bogstaver, og solnedgangsgradienter har blødere udgaver af himlen.

Byg en 80'er-solnedgang og et gitter i CSS

.scene {
  position: relative;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(180deg, #0b0221 0%, #2b0a4a 55%, #0b0221 55%);
}

.sun {
  position: absolute;
  left: 50%;
  top: 18%;
  width: min(40vw, 320px);
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffd319 0%, #ff901f 45%, #ff2975 80%);
  /* slice the lower half into bands */
  mask-image: linear-gradient(180deg, #000 0 58%, transparent 58% 61%, #000 61% 70%, transparent 70% 74%, #000 74% 83%, transparent 83% 88%, #000 88%);
}

.floor {
  position: absolute;
  left: -50%;
  right: -50%;
  top: 55%;
  bottom: -20%;
  background-image:
    linear-gradient(#ff2fd0 2px, transparent 2px),
    linear-gradient(90deg, #ff2fd0 2px, transparent 2px);
  background-size: 60px 60px;
  transform: perspective(320px) rotateX(62deg);
  transform-origin: top center;
}

For at animere det flytter du gulvets background-position nedad i et loop, og gitteret ser ud til at suse mod dig. Respekter indstillingen for reduceret bevægelse, når du gør det; animerede CSS-gradienter gennemgår mønstret.

80'er-skrifttyper og bogstaver

Typografien gjorde en stor del af arbejdet i årtiets grafik. Filmtitler og produktlogoer brugte tunge kursiver for fart, kromede eller udtrukne versaler for drama og løse penselskrifter til alt, der foregik på en strand. Ét enkelt ord behandlet på den måde kan bære et helt design.

• Tunge kursive sans-skrifttyper antyder bevægelse, perfekt til alt sporty eller hurtigt.
• Kromede versaler virker til højst et eller to ord; længere linjer mister refleksionen.
• Penselskrifter passer til Miami-paletten, sat småt ved siden af en fed sans.
• Pixel- og gitterskrifttyper nikker til arkaderne, men læses dårligt under en vis størrelse, så hold dem til titler.

For skrifttyper at prøve viser retroskrifttyper valg efter årti.

Sådan bruger du 80'er-æstetik uden kliché

Designer du i Gradiently, giver Lettering-behandlingerne Dybde og Spor en overskrift et 80'er-titelkorts dybde og fart, og en mørk Mark med violet og magenta lys danner nattehimlen bag den, med sit roligste område bag ordene, så skriften forbliver skarp.

Looket passer til musikaftener, gamingkanaler, lanceringer af retroprodukter, jubilæer og alt, der skal have et nostalgisk blink. Vil du have årtiet efter, så læs 90'er-æstetik.