80-luvun estetiikka: neon, kromi ja auringonlaskut

80-luvun estetiikka tarkoittaa neonia mustalla, kromikirjaimia, raidoiksi leikattuja auringonlaskuliukuvärejä ja horisonttiin jatkuvaa hehkuvaa ruudukkoa. Pehmeämpään puoleen kuuluvat Miamin pastellit ja Memphis-kuviot. Nykyversio pohjautuu pitkälti synthwaveen, joka toi 1980-luvun elokuvat, pelihallipelit ja syntetisaattorimusiikin takaisin 2000-luvulta alkaen. Alta löydät tärkeimmät ainekset, väripaletit koodeineen, auringonlaskun ja ruudukon CSS:n sekä vinkit siihen, ettei ilme muutu naamiaisasuksi.

80-luvun estetiikan ainekset

80-luvun estetiikka ja synthwave

Synthwavea kutsutaan joskus outruniksi Segan vuoden 1986 ajopelin mukaan. Musiikkilaji kasvoi verkossa 2000-luvun puolivälistä lähtien ja lainaa paljon 80-luvun elokuvamusiikista. Sen kuvasto määritteli monen nykyisen mielikuvan: tummanvioletti taivas, raidallinen aurinko, magenta ruudukko ja kromiteksti. Vuoden 2011 Drive-elokuva ja sen musiikki auttoivat tuomaan tyylin valtavirtaan.

Kun toimeksianto pyytää 80-lukua, selvitä mikä sen versio. Synthwaven yö, Miamin pastellinen päivä ja Memphis-kuviot ovat kolme eri ilmettä. Synthwave-värit ja vaporwave-värit käsittelevät verkkokulttuurin paluita tarkemmin. Memphis-design perehtyy kuvioihin.

80-luvun väripaletit

Kromiliukuväriä kannattaa tutkia. Kiillotettu metalli heijastaa vaaleaa taivasta tumman maan yllä. Väri alkaa vaaleana, tummenee keskustaa kohti, vaihtuu jyrkästi tummaksi terävällä horisontilla ja vaalenee taas alaosaa kohti. Juuri tämä terävä raja saa pinnan näyttämään metallilta eikä harmaalta. Kromitekstitehosteet näyttää, miten käytät sitä kirjaimissa. Auringonlaskuliukuvärit tarjoaa taivaan pehmeämpiä versioita.

80-luvun auringonlasku ja ruudukko CSS:llä

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

Animoi lattian background-position alaspäin toistuvana liikkeenä, niin ruudukko näyttää syöksyvän sinua kohti. Kunnioita vähennetyn liikkeen asetuksia. Animoidut CSS-liukuvärit käsittelee toteutustapaa.

80-luvun fontit ja kirjaimet

Tekstillä oli suuri rooli vuosikymmenen grafiikassa. Elokuvien nimet ja tuotelogot käyttivät paksua kursiivia vauhdin luomiseen, kromisia tai kohotettuja versaalikirjaimia dramaattisuuteen ja rentoja sivellinkirjaimia rantatunnelmaan. Näin käsitelty yksittäinen sana voi kantaa koko suunnitelman.

• Paksut kursivoidut groteskit viestivät liikkeestä ja sopivat urheilullisiin tai nopeisiin aiheisiin.
• Kromiversaalit toimivat enintään yhdessä tai kahdessa sanassa. Pidemmissä riveissä heijastus katoaa.
• Sivellinkirjaimet sopivat Miamin palettiin. Käytä niitä pieninä paksun groteskin vieressä.
• Pikseli- ja ruudukkofontit viittaavat pelihalleihin, mutta niitä on vaikea lukea pieninä. Säästä ne otsikoihin.

Retrofontit listaa kokeiltavia fonttiperheitä vuosikymmenittäin.

Näin käytät 80-luvun estetiikkaa ilman kliseitä

Gradientlyn Kohotettu- ja Jälki-käsittelyt antavat otsikolle 80-luvun alkutekstien syvyyttä ja vauhtia. Tumma Mark, jossa on violettia ja magentaa valoa, luo yötaivaan ja pitää rauhallisimman alueensa sanojen takana, jotta teksti säilyy terävänä.

Ilme sopii musiikki-iltoihin, pelikanaville, retrotuotteiden julkaisuihin, vuosipäiviin ja kaikkeen, johon halutaan pieni nostalginen pilke. Seuraavasta vuosikymmenestä kertoo 90-luvun estetiikka.