80-tallsestetikk: neon, krom og solnedgangsgradienter

80-tallsestetikken er neon på svart, kromtekst, solnedgangsgradienter delt opp i bånd og et glødende rutenett som strekker seg mot horisonten, med en mykere side av Miami-pasteller og Memphis-mønstre. Det meste av dagens versjon kommer via synthwave, en stil som fra 2000-tallet gjenopplivet film, arkadespill og synthesizermusikk fra 1980-tallet. Under finner du de viktigste ingrediensene, paletter med koder, CSS for en solnedgang og et rutenett, og hvordan du bruker stilen uten at det blir kostymefest.

Ingrediensene i 80-tallsestetikken

80-tallsestetikk og synthwave

Synthwave, noen ganger kalt outrun etter Segas bilspill for arkadehaller fra 1986, er en musikksjanger som vokste frem på nettet fra midten av 2000-tallet og låner tungt fra filmmusikk fra 80-tallet. Omslagene definerte stilen mange ser for seg i dag: en mørk fiolett himmel, en stripete sol, et magenta rutenett og kromtekst. Filmen Drive fra 2011 og lydsporet bidro til å bringe stilen ut til et bredt publikum.

Så når en brief sier 80-tall, spør hvilket 80-tall. Synthwave-natten, Miami-pastellene på dagtid og Memphis-mønstrene er tre forskjellige uttrykk. Synthwave-farger og vaporwave-farger går dypere inn i de to internettgjenopplivingene, og Memphis-design dekker mønstersiden.

Fargepaletter fra 80-tallet

Det er kromgradienten som er verdt å studere. Polert metall speiler en lys himmel over en mørk bakke, så fargen starter lyst, blir dypere mot midten, slår brått over i mørkt ved en skarp horisontlinje og lysner igjen mot bunnen. Den harde linjen er det som får den til å se ut som metall og ikke som grått. Kromeffekter på tekst viser hvordan du bruker den på bokstaver, og solnedgangsgradienter har mykere versjoner av himmelen.

Bygg en 80-tallssolnedgang og et rutenett 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 å animere det flytter du gulvets background-position nedover i en løkke, så ser det ut som rutenettet suser mot deg. Respekter innstillinger for redusert bevegelse når du gjør det; animerte CSS-gradienter dekker mønsteret.

80-tallsskrifter og bokstaver

Typografien gjorde mye av jobben i tiårets grafikk. Filmtitler og produktlogoer brukte tunge kursiver for fart, krom eller ekstruderte versaler for dramatikk og løse penselskrifter til alt som foregikk på en strand. Ett enkelt ord behandlet slik kan bære et helt design.

• Tunge kursive sans serif-skrifter antyder bevegelse, perfekt til alt som er sporty eller raskt.
• Kromversaler fungerer for høyst ett eller to ord; lengre linjer mister refleksen.
• Penselskrifter passer med Miami-paletten, satt lite ved siden av en kraftig sans.
• Piksel- og rutenettskrifter nikker til arkadehallene, men leses dårlig under en stor størrelse, så hold dem til titler.

Vil du ha skriftfamilier å prøve, lister retroskrifter opp alternativer tiår for tiår.

Slik bruker du 80-tallsestetikken uten klisjeer

Designer du i Gradiently, gir bokstavbehandlingene Uttrekk og Spor en overskrift dybden og farten fra et tittelkort fra 80-tallet, og en mørk Mark med fiolett og magenta lys blir nattehimmelen bak, med sitt roligste område bak ordene så teksten holder seg skarp.

Stilen passer musikkvelder, spillkanaler, lanseringer av retroprodukter, jubileer og alt som vil ha et nostalgisk blunk. Vil du ha tiåret etter, les 90-tallsestetikk.