Estetica anni 80: neon, cromature e tramonti sfumati

L’estetica anni 80 è neon su nero, lettering cromato, tramonti sfumati tagliati in fasce e una griglia luminosa che corre verso l’orizzonte, con un lato più morbido fatto di pastelli alla Miami e pattern Memphis. Gran parte della versione di oggi passa dalla synthwave, uno stile che dagli anni Duemila ha ripreso i film, i videogiochi da sala e la musica a sintetizzatori degli anni Ottanta. Qui sotto trovi gli ingredienti chiave, le palette con i codici, il CSS per tramonto e griglia e come usarla senza scivolare nel costume.

Gli ingredienti dell’estetica anni 80

Estetica anni 80 e synthwave

La synthwave, a volte chiamata outrun dal gioco di guida di Sega del 1986, è un genere musicale cresciuto online dalla metà degli anni Duemila che attinge molto alle colonne sonore dei film anni 80. La sua grafica ha definito l’immagine che molti oggi hanno in mente: un cielo viola scuro, un sole a strisce, una griglia magenta e scritte cromate. Il film Drive del 2011 e la sua colonna sonora hanno aiutato lo stile ad arrivare al grande pubblico.

Quindi, quando un brief dice anni 80, chiedi quali. La versione notturna synthwave, quella diurna in pastelli Miami e quella a pattern Memphis sono tre stili diversi. Colori synthwave e colori vaporwave approfondiscono i due revival nati su internet, mentre design Memphis tratta il lato dei pattern.

Palette di colori anni 80

La sfumatura cromata è quella da studiare. Il metallo lucido riflette un cielo chiaro sopra un suolo scuro, quindi il colore parte chiaro, si fa più profondo verso il centro, scatta al buio su una netta linea d’orizzonte, poi si schiarisce di nuovo verso il basso. È quella linea netta a farlo sembrare metallo e non grigio. Effetti testo cromato mostra come applicarla al lettering, mentre sfumature da tramonto offre versioni più morbide del cielo.

Costruire un tramonto anni 80 con griglia in 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;
}

Per animarlo, sposta in loop la background-position del pavimento verso il basso e la griglia sembrerà correre verso di te. Rispetta le impostazioni di movimento ridotto; sfumature animate in CSS tratta lo schema.

Font e lettering anni 80

La tipografia faceva gran parte del lavoro nella grafica del decennio. I titoli dei film e i logo dei prodotti usavano corsivi pesanti per la velocità, maiuscole cromate o estruse per il dramma e corsivi a pennello sciolti per tutto ciò che era ambientato in spiaggia. Una sola parola trattata così può reggere un intero design.

• I sans serif corsivi e pesanti suggeriscono movimento, perfetti per tutto ciò che è sportivo o veloce.
• Le maiuscole cromate funzionano al massimo per una o due parole; le righe più lunghe perdono il riflesso.
• I corsivi a pennello si abbinano alla palette Miami, in piccolo accanto a un sans deciso.
• I font pixel e a griglia strizzano l’occhio alle sale giochi, ma si leggono male sotto una certa grandezza, quindi tienili per i titoli.

Per le famiglie da provare, font retrò elenca opzioni per decennio.

Come usare l’estetica anni 80 senza cliché

Se progetti in Gradiently, i trattamenti di lettering Estrusione e Scia danno a un titolo la profondità e la velocità di una schermata di apertura anni 80, e un Mark scuro con luce viola e magenta crea il cielo notturno adatto, tenendo la sua zona più calma dietro le parole così il testo resta nitido.

Lo stile si adatta a serate musicali, canali di gaming, lanci di prodotti retrò, anniversari e a tutto ciò che vuole una strizzata d’occhio alla nostalgia. Se ti interessa il decennio successivo, leggi estetica anni 90.