10 fantastici effetti di tipo retrò CSS e HTML

Hipstamatic, Spotify e ora Adidas: sembra che la nostra società abbia un'enorme brama di vecchi tempi e vecchi modi. Forse il nostro mercato è così saturo di tutto ciò che è high-tech e innovativo che stiamo iniziando ad annoiarci. O forse è solo una banale nostalgia dei vecchi tempi in cui tutto sembrava facile, semplice e rosa. L'ossessione attuale per tutto ciò che proviene dal passato recente è evidente. Può essere visto ovunque e la sfera del web design non fa eccezione.

Lo stile retrò, infatti, si manifesta di volta in volta nel web. Mostra attraverso tavolozze di colori pastello retrò, effetti bicromia, stampe geometriche audaci e semplificate, illustrazioni art-deco, effetti sgranati e rumorosi, immagini simili a Polaroid, layout ispirati ai tabloid, scenari presi dai giochi della vecchia scuola e, naturalmente, vecchio- tipografia tempestiva.

A proposito, la tipografia è una delle opzioni più popolari quando si tratta di instillare un tocco retrò in un progetto. È sottile e di buon gusto. E, soprattutto, non sovraccarica né sovraccarica il progetto. È solo un tocco finale perfetto che cattura l'attenzione e crea un'atmosfera adeguata.

Inoltre, puoi riprodurre rapidamente effetti degli anni '80 o '90 con l'aiuto dell'amato trio di CSS/JS e SVG. Basta applicare l'effetto a qualsiasi parola e ottenere il risultato desiderato in pochi secondi. E non è necessario pasticciare con programmi di fotoritocco o di progettazione come Photoshop o Sketch per apportare modifiche. Semplice ed elegante, no?

Se sei uno che apprezza questo modo di fare le cose, abbiamo raccolto 10 frammenti di codice con incredibili effetti tipografici retrò. Diamo un'occhiata:

Ha lasciato il Paese

Non abbiamo potuto fare a meno di iniziare la nostra raccolta con questo eccezionale frammento di codice di Gabrielle Wee. Il suo progetto si chiama Left the Country ed è stato principalmente ispirato dall'horror dei Duffer Brothers, "Stranger Things". Molti designer e sviluppatori lo hanno riprodotto. Dribbble e Codepen pullulano di interpretazioni professionali dell'introduzione dello show. C'è anche un generatore sviluppato da Nelson Cash che ti permette di ricreare un logo con i tuoi dati e scaricare l'immagine. Ma se vuoi evitare tutto ciò che è statico, prova lo snippet di codice di Wee che è una soluzione HTML e SCSS pura.

Nessun posto vacante 404

No Vacancy 404 di Riley Shaw è molto simile al precedente lavoro di Gabrielle Wee. Le sue radici risiedono nella meravigliosa linea artistica che viene arricchita con un tocco luminoso e un effetto lampeggiante per un maggiore realismo. Ci ricorda tutte quelle insegne luminose al neon che erano sempre più popolari a metà del secolo scorso in America. Tuttavia, forse non sembravano eleganti e raffinati come il capolavoro di Riley Shaw. La soluzione è una simbiosi di eleganza, raffinatezza e appeal vintage.

Insegna al neon d'epoca

Hai bisogno di più effetti luminosi e atmosfera americana? Quindi dovresti rivolgere la tua attenzione all'insegna al neon vintage di Kyle Lavery. Sembra proprio che sia uscito dalle pubblicità degli anni '60 che erano sovrappopolate con insegne luminose. L'intelligente combinazione di tubi di vari diametri, il meraviglioso effetto luminoso, la controversa tavolozza dei colori e il magnifico carattere tipografico fanno il trucco, risultando in un eccezionale capolavoro basato sul codice.

Scissione: Space Invaders

Torniamo agli anni '80 e ai frammenti di codice che presentano effetti tipografici realizzati pensando a questo periodo. Innanzitutto, gli anni '80 e '90 riguardavano i videogiochi. La nostra infanzia è stata così adorabile. E Martin Pitt è uno di quelli che è riuscito a ricordarcelo. His Splitting: Space Invaders ci riporta alla nostra adolescenza. Questa realizzazione affascina con vibrazioni positive e giocosità. Sembra carino e sognante. È stato creato con l'aiuto della libreria Splitting, che rende facili le manipolazioni con i CSS.

Giocare con la tipografia retrò

Non ci sono anni '90 senza giochi arcade giocati nella console per videogiochi domestica Atari. È solo un sinonimo degli anni '80 e '90 nel mondo Geek. E Max Kohler lo sa perfettamente. Il suo codepen dedicato alla tipografia retrò presenta il logo Atari abilmente riprodotto. Troverai anche altri quattro effetti che danno al lettering un piacevole tocco retrò.

Nuovo testo retrò / Tipografia anni '80 / 404 SVG

Ci sono diversi fantastici effetti di testo nella nostra collezione che richiamano alla mente alcuni dolci ricordi legati alla TV. Ad esempio, New retro text di Vladimir Jovanovic, 80s Typography di David Parker e 404 SVG di Marcos Mellado. Mentre i primi due progetti utilizzano una tipografia audace, una superficie lucida, una stilizzazione al neon e una colorazione drastica per una certa atmosfera introduttiva VHS retrò, il secondo sembra un po' rustico, banale e grezzo, proprio come i videoclip musicali su MTV di quel periodo.

Carattere tipografico vintage/titolo vintage fantastico

Questa non sarebbe una raccolta completa di effetti tipografici retrò senza un paio di soluzioni tradizionali. E abbiamo due fantastici frammenti di codice: Vintage Typeface di Thibault Jan Beyer e Awesome Vintage Title di Kevin Nagata. Entrambi mostrano un carattere tipografico vintage tradizionale, proprio come siamo abituati a immaginarlo: ultrasottile con forme delle lettere sempre più allungate, un sottile tocco art-deco e, naturalmente, un'ombra che è il cuore e l'anima dell'opera d'arte. Mentre il progetto di Thibault Jan Beyer sembra classico e maestoso; il progetto di Kevin Nagata sembra un po' moderno con un certo sottofondo giocoso.

Tornare in tempo

Se sei stufo e stanco di tutto ciò che è ultramoderno, sofisticato e di fascia alta, allora è tempo di abbandonare il presente e cercare ispirazione nel passato. Credici, ha sempre un asso nella manica. Non una volta non riesce a salvare la giornata.

Offre tendenze e soluzioni ai designer che consentono a un progetto di distinguersi dalla massa. E gli effetti tipografici retrò ne sono l'esempio perfetto. Sono accoglienti e piacevoli tuffi dal passato che attirano naturalmente l'attenzione, sentendosi come una boccata d'aria fresca.