10 incroyables effets de type rétro CSS et HTML

Hipstamatic, Spotify, et maintenant Adidas : il semble que notre société ait une énorme envie de vieux jours et d'anciennes habitudes. Peut-être que notre marché est tellement saturé de tout ce qui est high-tech et innovant que nous commençons à nous ennuyer. Ou peut-être n'est-ce qu'une nostalgie banale des temps anciens où tout semblait facile, simple et rose. L'obsession actuelle pour tout ce qui vient du passé récent est évidente. On le voit partout, et la sphère du web design ne fait pas exception.

En effet, le style rétro se manifeste de temps en temps sur le web. Cela se voit à travers des palettes de couleurs rétro pastel, des effets bicolores, des imprimés géométriques simplifiés audacieux, des illustrations art-déco, des effets granuleux et bruyants, des images de type Polaroid, des mises en page inspirées des tabloïds, des décors tirés des jeux de la vieille école et, bien sûr, du vieux- typographie ponctuelle.

En parlant de cela, la typographie est l'une des options les plus populaires lorsqu'il s'agit d'instiller une touche rétro piquante dans un projet. C'est subtil et de bon goût. Et, surtout, il ne submerge ni ne surcharge le projet. C'est juste une touche finale parfaite qui attire le regard et crée une atmosphère appropriée.

De plus, vous pouvez reproduire rapidement des effets des années 80 ou 90 à l'aide du trio bien-aimé de CSS/JS et SVG. Appliquez simplement l'effet à n'importe quel mot et obtenez le résultat souhaité en quelques secondes. Et vous n'avez pas besoin de jouer avec des programmes de retouche photo ou de conception tels que Photoshop ou Sketch pour apporter des modifications. Simple et élégant, n'est-ce pas ?

Si vous êtes de ceux qui apprécient cette façon de faire les choses, nous avons rassemblé 10 extraits de code avec des effets de typographie rétro étonnants. Nous allons jeter un coup d'oeil:

A quitté le pays

Nous n'avons pas pu nous empêcher de commencer notre collection avec cet extrait de code exceptionnel de Gabrielle Wee. Son projet s'appelle Left the Country et s'inspire principalement de l'horreur des Duffer Brothers, "Stranger Things". De nombreux designers et développeurs l'ont reproduit. Dribbble et Codepen regorgent de prises professionnelles sur l'intro de l'émission. Il existe même un générateur développé par Nelson Cash qui permet de recréer un logo avec vos données et de télécharger l'image. Mais si vous voulez éviter tout ce qui est statique, essayez l'extrait de code de Wee qui est une pure solution HTML et SCSS.

Pas de poste vacant 404

No Vacancy 404 de Riley Shaw ressemble beaucoup à l'œuvre précédente de Gabrielle Wee. Ses racines résident dans le merveilleux dessin au trait qui est rehaussé d'une touche lumineuse et d'un effet clignotant pour un plus grand réalisme. Cela nous rappelle toutes ces enseignes lumineuses au néon qui étaient de plus en plus populaires au milieu du siècle dernier en Amérique. Cependant, peut-être qu'ils n'avaient pas l'air aussi élégants et raffinés que le chef-d'œuvre de Riley Shaw. La solution est une symbiose d'élégance, de sophistication et d'attrait vintage.

Enseigne Au Néon Vintage

Besoin de plus d'effets lumineux et d'ambiance américaine ? Ensuite, vous devriez porter votre attention sur Vintage Neon Sign de Kyle Lavery. On a juste l'impression de sortir des publicités des années 60 qui étaient surpeuplées d'enseignes lumineuses. La combinaison intelligente de tubes de différents diamètres, le merveilleux effet lumineux, la palette de couleurs controversée et la magnifique police de caractères font l'affaire, résultant en un chef-d'œuvre exceptionnel alimenté par le code.

Fractionnement : les envahisseurs de l'espace

Revenons aux années 80 et aux extraits de code qui présentent des effets de typographie réalisés avec cette période à l'esprit. Avant tout, les années 80 et 90 étaient consacrées aux jeux vidéo. Notre enfance était si adorable. Et Martin Pitt fait partie de ceux qui ont réussi à nous le rappeler. Son Splitting : Space Invaders nous ramène à notre adolescence. Cette réalisation séduit par ses ondes positives et son côté ludique. Il a l'air mignon et rêveur. Il a été créé à l'aide de la bibliothèque Splitting, qui facilite les manipulations avec CSS.

Jouer avec la typographie rétro

Il n'y a pas de années 90 sans jeux d'arcade joués sur la console de jeux vidéo Atari. C'est juste un synonyme des années 80 et 90 dans le Geek World. Et Max Kohler le sait parfaitement. Son codepen dédié à la typographie rétro arbore le logo Atari habilement reproduit. Vous trouverez également quatre autres effets qui donnent au lettrage une agréable touche rétro.

Nouveau texte rétro / typographie des années 80 / 404 SVG

Il y a plusieurs effets de texte fantastiques dans notre collection qui rappellent de doux souvenirs liés à la télévision. Par exemple, New retro text de Vladimir Jovanovic, 80s Typography de David Parker et 404 SVG de Marcos Mellado. Alors que les deux premiers projets utilisent une typographie audacieuse, une surface brillante, une stylisation au néon et une coloration drastique pour une certaine ambiance d'intro rétro VHS, le second se sent un peu rustique, banal et grossier – tout comme les clips vidéo musicaux sur MTV de cette période.

Police de caractères vintage / Titre vintage génial

Ce ne serait pas une collection complète d'effets de typographie rétro sans quelques solutions traditionnelles. Et nous avons deux extraits de code fantastiques : Vintage Typeface de Thibault Jan Beyer et Awesome Vintage Title de Kevin Nagata. Tous deux affichent une police de caractères vintage traditionnelle, comme nous avons l'habitude de l'imaginer : ultra-fine avec des formes de lettres de plus en plus allongées, une subtile touche art-déco et bien sûr une ombre qui est le cœur et l'âme de l'œuvre. Alors que le projet de Thibault Jan Beyer s'annonce classique et majestueux ; le projet de Kevin Nagata a l'air un peu moderne avec une certaine nuance ludique.

Dans le temps

Si vous en avez marre de tout ce qui est ultra-moderne, sophistiqué et haut de gamme, il est temps d'abandonner le présent et de chercher l'inspiration dans le passé. Croyez-nous, il a toujours un as dans le trou. Pas une seule fois il n'échoue à sauver la situation.

Il propose aux designers des tendances et des solutions qui permettent à un projet de se démarquer de la foule. Et les effets de typographie rétro en sont le parfait exemple. Ce sont des souffles accueillants et agréables du passé qui attirent naturellement l'attention, se sentant comme une bouffée d'air frais.