Om du skulle fjonge opp et skriv på fellestavla på 90-tallet, var det kun ett verktøy som gjaldt. Gode gamle WordArt i Microsoft Word lot den jevne tekstforfatter skape lekre blikkfang-overskrifter, som lokket selv de mest sidrompa kollegaene til fellesmøte i kantina.
Vårt nye favoritt-rammeverk er 8-bit
WordArt er faktisk en del av Word den dag i dag, selv om mange nok vil mene den har mistet sjarmen fra 90-tallet. Borte er falsk 3D, rare regnbuer, metallisk preg og tekst i perspektiv. De har blitt erstattet av hakket mer moderne, men akk så kjedelige effekter som skygger, omriss og glød.
Så hva gjør en stakkars webutvikler når han skal piffe opp invitasjonen til FAU-møte i 2019?
Det har den israelske utvikleren, og team-leder i Wix.com, Shalom Yerushalmy funnet en løsning på!
Grepet av nostalgi
1. februar postet nemlig Yerushalmy på Reddit at han «hadde fått et realt nostalgi-angrep», og laget et bibliotek.
I posten er det lenket til hans GitHub-konto og prosjektet react-wordart: Et bibliotek som lar deg bygge WordArt-komponenter i React. Biblioteket tar utgangspunkt i de klassiske stilene fra 90-tallet med valgene; regnbue, blues, superhelt, radial-gradient, tilt, lilla gradient, horisont-gradient, kursiv med omriss, og tekst med skygge - kalt Slate.
Lag dynamisk hover-animasjon
Responsen lot ikke vente på seg, og flere brukere ble grepet av nostalgi.
- Mine bokomtaler fra tredjeklasse hjemsøker meg! skrev brukeren timmonsjg i kommentarfeltet.
- Du bør bli utestengt fra programmering 😛, skrev en annen sarkastisk.
- Det tar jeg som et kompliment, svarte Yerushalmy med et smil.
For at stilene ikke nødvendigvis er like lekre i 2019 som i 1997, ser både Reddit-brukerne og Yerushalmy å være inneforstått med.
Nytt CSS-bibliotek
Brukeren NotAmaan påpekte at bibloteket bør gjøres om til et selvstendig CSS-bibliotek, slik at utviklere som ikke bruker React kan nyte det.
- Vær så god, ropte Yerushalmy ut, og lenket videre til en ren CSS-variant av WordArt-stilene.
Hele stilsettet ligger i styles.css i GitHub-prosjektet css-wordart.
Du legger rett og slett på klassen .wordart og for eksempel .blues på din H-tag, og så pakker du inn innholdet i taggen i en <span> med klassen .text.
Her ser du stilene du kan velge, og hvordan resultatene blir:
<h4 class="wordart rainbow"><span class="text">Regnbue</span></h4>
<h4 class="wordart blues"><span class="text">Blues</span></h4>
<h4 class="wordart superhero"><span class="text">Superhelt</span></h4>
<h4 class="wordart radial"><span class="text">Rund gradient</span></h4>
<h4 class="wordart tilt"><span class="text">Tiltet tekst</span></h4>
<h4 class="wordart purple"><span class="text">Lilla gradient</span></h4>
<h4 class="wordart horizon"><span class="text">Horisont gradient</span></h4>
<h4 class="wordart italicOutline"><span class="text">kursiv omriss </span></h4>
<h4 class="wordart slate"><span class="text">Tekst med skygge (slate)</span></h4>Regnbue
Blues
Superhelt
Rund gradient
Tiltet tekst
Lilla gradient
Horisont gradient
kursiv omriss
Tekst med skygge (slate)
Skru på mørkmodus med CSS
Nå kan nettsiden din arve innstillingene fra operativsystemet. Men det er en hake.