10 fantastiska CSS- och HTML-retroeffekter

Hipstamatic, Spotify och nu Adidas: Vårt samhälle verkar ha ett enormt sug efter gamla dagar och gamla sätt. Kanske är vår marknad så mättad med allt som är högteknologiskt och innovativt att vi har tråkigt. Eller så är det kanske bara en trivial nostalgi för gamla dagar när allt verkade enkelt, vanligt och rosa. Den nuvarande besattheten av saker från det senaste förflutna är uppenbar. Det kan ses överallt, och webbdesignfältet är inget undantag.

Faktum är att retrostilar dyker upp ibland på webben. Uttryckt genom retropastellfärger, duotoneffekter, alltför djärva geometriska tryck, dekorativa konstverk, korniga effekter, polaroidliknande bilder, tabloidinspirerade mönster, lönnscener hämtade från gamla spel och naturligtvis gammal typografi.

På tal om det, typografi är ett av de mest populära valen när det gäller att introducera en gnistrande retrokänsla till ett projekt. Den är delikat och i god smak. Och viktigast av allt, det överbelasta eller överbelasta inte projektet. Det är en perfekt finish som fångar uppmärksamhet och skapar rätt atmosfär.

Dessutom kan du snabbt återskapa 80- eller 90-talseffekter med hjälp av din älskade CSS/JS och SVG-trio. Använd bara effekt på vilket ord som helst och få önskat resultat på några sekunder. Och du behöver inte hantera designrelaterade eller fotoredigeringsprogram som Photoshop eller Sketch för att göra ändringar. Enkelt och elegant eller hur?

Om du är någon som uppskattar hur det här fungerar, har vi satt ihop 10 kodavsnitt med fantastiska stavningseffekter. Vi får se:

Lämnar staden

Vi kan inte låta bli att starta vår samling med denna fantastiska Gabrielle Week-kodbit. Hans projekt heter Left the Country och är främst inspirerat av Duffer Brothers skräckverk “Stranger Things”. Många designers och utvecklare har återskapat det. Dribbble och Codepen har full expertis när det gäller att rekommendera programmet. Det finns till och med en generator utvecklad av Nelson Cash som låter dig återskapa logotypen med dina data och ladda ner bilder. Men om du vill undvika något statiskt, prova Wee’s snippet, som är en ren HTML- och SCSS-lösning.

Inget ledigt utrymme 404

Riley Shaws No Vacancy 404 liknar Gabrielle Wees tidigare verk. Dess rötter ligger i superb line art förstärkt med en gnistrande touch och stroboskopeffekt för ökad realism. Det påminner oss om alla dessa glödande neonskyltar som blev allt mer populära i mitten av förra seklet i Amerika. Men de är kanske inte lika eleganta och sofistikerade som Riley Shaws mästerverk. Lösningen är en symbios av elegans, sofistikering och klassiskt tilltalande.

Klassisk neonskylt

Behöver du fler gnistrande effekter och en amerikansk atmosfär? Då bör du fokusera din uppmärksamhet på Kyle Laverys klassiska neonskylt. Det ser ut som om det är från 1960-talets reklam översvämmad med upplysta skyltar. Den smarta kombinationen av rör med flera diametrar, fantastiska gnistrande effekter, kontroversiell färgpalett och fantastiska typsnitt gör susen och skapar ett unikt mästerverk med kod.

Division: Space Invaders

Låt oss gå tillbaka till 80-talet och kodsektionerna med stavningseffekterna som skapades under denna period. Först och främst fokuserade 80- och 90-talen på tv-spel. Vår barndom var underbar. Och Martin Pitt var en av dem som försökte påminna oss. His Incident: Space Invaders tar oss tillbaka till tonåren. Denna insikt trollbinder de positiva vibbarna och glädjen. Det ser så sött och drömskt ut. Det skapas med Splting-biblioteket, vilket gör det enkelt att manipulera CSS.

Spel med retro typografi

No 90 utan arkadspel spelas på Atari-hemkonsolen. Det är bara en synonym för 80- och 90-talen i Geek-världen. Och Max Kohler vet det perfekt. Codepen dedikerad till retrotypografi har på ett smart sätt återskapat Atari-logotypen. Du hittar också fyra extra effekter som ger texten en retrolook.

Ny 80/404 SVG retrotext/typografi

Det finns några fantastiska texteffekter i vår samling som väcker några söta minnen relaterade till tv. Exempel inkluderar ny retrotext av Vladimir Jovanović, 1980-talstypsnitt av David Park och 404 SVG av Marcos Mellado. Medan de två första projekten använder djärva typsnitt, glänsande finish, neonstilisering och drastiska färger för en viss retro-VHS-showcase-vibe, känns de andra två lite rustika, vardagliga och grova, som videoklipp. musikaler på MTV från den tiden.

Fantastisk vintage typografi/klassisk titel

Detta skulle inte vara en komplett samling retrotryckeffekter utan några få traditionella lösningar. Och vi har två fantastiska kodbitar: klassisk typografi av Thibault Jan Beyer och Awesome Vintage header av Kevin Nagata. Båda representerar ett traditionellt klassiskt typsnitt, som vi ofta föreställer oss: supertunt med allt längre bokstäver, ett subtilt art déco-drag och, naturligtvis, en skugga som är konstverkets hjärta och själ. Medan Thibault Jan Beyers projekt låter klassiskt och episkt; Kevin Nagatas projekt verkar lite modernt med en viss lekfull ton.

Vrid tillbaka tiden

Om du är trött på allt ultramodernt, sofistikerat och banbrytande, är det dags att släppa taget om nuet och söka inspiration tidigare. Lita på oss, han har alltid ett trumfkort. Inte en enda gång misslyckades han med att rädda dagen.

Det erbjuder designtrender och lösningar som gör att ett projekt kan sticka ut från mängden. Och retrotryckseffekten är det perfekta exemplet på det. De är välkomnande och trevliga explosioner från det förflutna som naturligt lägger märke till, som en frisk fläkt.