10 increíbles efectos de tipo retro CSS y HTML

Hipstamatic, Spotify y ahora Adidas: parece que nuestra sociedad tiene un ansia masiva por los viejos tiempos y las viejas costumbres. Tal vez nuestro mercado est√° tan saturado con todo de alta tecnolog√≠a e innovador que estamos empezando a aburrirnos. O tal vez sea solo una nostalgia banal por los viejos tiempos cuando todo parec√≠a ser f√°cil, simple y de color rosa. La obsesi√≥n actual con todo del pasado reciente es evidente. Se puede ver en todas partes, y la esfera del dise√Īo web no es una excepci√≥n.

De hecho, el estilo retro se manifiesta de vez en cuando en la web. Se muestra a trav√©s de paletas de colores pastel retro, efectos duotono, estampados geom√©tricos en negrita demasiado simplificados, ilustraciones art-deco, efectos granulados y ruidosos, im√°genes tipo Polaroid, dise√Īos inspirados en tabloides, paisajes tomados de los juegos de la vieja escuela y, por supuesto, viejos tipograf√≠a a tiempo.

Hablando de eso, la tipografía es una de las opciones más populares cuando se trata de inculcar una sensación retro chispeante en un proyecto. Es sutil y de buen gusto. Y, lo más importante, no abruma ni sobrecarga el proyecto. Es un toque final perfecto que llama la atención y establece una atmósfera adecuada.

Adem√°s, puede reproducir r√°pidamente los efectos de los a√Īos 80 o 90 con la ayuda del querido tr√≠o de CSS / JS y SVG. Simplemente aplique el efecto a cualquier palabra y obtenga el resultado deseado en segundos. Y no necesita meterse con programas de edici√≥n de fotos o relacionados con el dise√Īo como Photoshop o Sketch para hacer modificaciones. Simple y elegante, ¬Ņno?

Si eres de los que aprecia esta forma de hacer las cosas, hemos reunido 10 fragmentos de código con sorprendentes efectos de tipografía retro. Vamos a ver:

Deja el pais

No pudimos evitar comenzar nuestra colecci√≥n con este excelente fragmento de c√≥digo de Gabrielle Wee. Su proyecto se llama Left the Country y se inspir√≥ principalmente en el horror de Duffer Brothers, "Stranger Things". Una gran cantidad de dise√Īadores y desarrolladores lo han reproducido. Dribbble y Codepen est√°n llenos de opiniones profesionales sobre la introducci√≥n del programa. Incluso hay un generador desarrollado por Nelson Cash que le permite recrear un logotipo con sus datos y descargar la imagen. Pero si desea evitar todo lo est√°tico, pruebe el fragmento de c√≥digo de Wee que es una soluci√≥n pura de HTML y SCSS.

Sin vacante 404

No Vacancy 404 de Riley Shaw es muy similar al trabajo anterior de Gabrielle Wee. Sus raíces se encuentran en el maravilloso arte lineal que se mejora con un toque brillante y un efecto parpadeante para un mayor realismo. Nos recuerda a todos esos brillantes letreros de neón que fueron cada vez más populares a mediados del siglo pasado en Estados Unidos. Sin embargo, tal vez no se veían tan elegantes y refinados como la obra maestra de Riley Shaw. La solución es una simbiosis de elegancia, sofisticación y atractivo vintage.

Letrero de neón vintage

¬ŅNecesita m√°s efectos brillantes y ambiente estadounidense? Entonces deber√≠as dirigir tu atenci√≥n al Vintage Neon Sign de Kyle Lavery. Parece que sali√≥ de los anuncios de los a√Īos 60 que estaban superpoblados con carteles luminosos. La combinaci√≥n inteligente de tubos de varios di√°metros, un maravilloso efecto brillante, una paleta de colores controvertida y el magn√≠fico tipo de letra hacen el truco, lo que resulta en una obra maestra sobresaliente con c√≥digo.

División: invasores del espacio

Volvamos a los 80 y fragmentos de c√≥digo que presentan efectos de tipograf√≠a creados teniendo en cuenta este per√≠odo. En primer lugar, los a√Īos 80 y 90 se centraron en los videojuegos. Nuestra infancia fue tan adorable. Y Martin Pitt es uno de los que ha logrado recordarnos eso. Su divisi√≥n: Space Invaders nos trae de vuelta a nuestra adolescencia. Esta realizaci√≥n encanta con vibraciones positivas y alegr√≠a. Se ve lindo y so√Īador. Fue creado con la ayuda de la biblioteca Splitting, lo que hace que las manipulaciones con CSS sean f√°ciles.

Jugando con tipografía retro

No hay 90 sin juegos de arcade jugados en la consola de videojuegos dom√©stica Atari. Es solo un sin√≥nimo de los a√Īos 80 y 90 en el mundo Geek. Y Max Kohler lo sabe perfectamente. Su codepen dedicado a la tipograf√≠a retro presenta h√°bilmente el logotipo de Atari reproducido. Tambi√©n encontrar√° cuatro efectos m√°s que le dan a las letras un agradable toque retro.

Nuevo texto retro / tipografía de los 80/404 SVG

Hay varios efectos de texto fant√°sticos en nuestra colecci√≥n que recuerdan algunos dulces recuerdos relacionados con la televisi√≥n. Por ejemplo, Nuevo texto retro de Vladimir Jovanovińá, Tipograf√≠a de los 80 de David Parker y 404 SVG de Marcos Mellado. Si bien los primeros dos proyectos utilizan una tipograf√≠a audaz, una superficie brillante, una estilizaci√≥n de ne√≥n y un colorido dr√°stico para un cierto ambiente de introducci√≥n retro de VHS, el segundo se siente un poco r√ļstico, mundano y crudo, al igual que los videoclips musicales en MTV de ese per√≠odo.

Tipografía vintage / Título vintage impresionante

Esta no sería una colección completa de efectos de tipografía retro sin un par de soluciones tradicionales. Y tenemos dos fragmentos de código fantásticos: Vintage Typeface de Thibault Jan Beyer y Awesome Vintage Title de Kevin Nagata. Ambos muestran un tipo de letra vintage tradicional, tal como estamos acostumbrados a imaginarlo: ultrafino con letras cada vez más alargadas, un sutil toque art-deco y, por supuesto, una sombra que es el corazón y el alma de la obra de arte. Mientras que el proyecto de Thibault Jan Beyer parece clásico y majestuoso; El proyecto de Kevin Nagata parece un poco moderno con un cierto tono juguetón.

Atr√°s en el tiempo

Si estás cansado de todo lo ultramoderno, sofisticado y de alta gama, entonces es hora de deshacerte del presente y buscar inspiración en el pasado. Créanos, siempre tiene un as en el hoyo. Ni una sola vez deja de salvar el día.

Ofrece a los dise√Īadores tendencias y soluciones que permiten que un proyecto se destaque entre la multitud. Y los efectos de tipograf√≠a retro son el ejemplo perfecto de eso. Son explosiones acogedoras y agradables del pasado que, naturalmente, llaman la atenci√≥n, como una bocanada de aire fresco.