10 increíbles efectos de tipo retro CSS y HTML

Hipstamatic, Spotify y ahora Adidas: parece que nuestra sociedad tiene un anhelo masivo por los viejos tiempos y las viejas formas. Tal vez nuestro mercado está tan saturado con todo lo innovador y de alta tecnología que estamos empezando a aburrirnos. O tal vez sea sólo una banal nostalgia de los viejos tiempos en los que todo parecía fácil, sencillo y color de rosa. La obsesión actual por todo lo 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 retro pastel, efectos de duotono, estampados geométricos audaces y simplificados, ilustraciones art-deco, efectos granulados y ruidosos, imágenes tipo Polaroid, diseños inspirados en los tabloides, escenarios tomados de los juegos de la vieja escuela y, por supuesto, de la vieja escuela. tipografía oportuna.

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

Además, puede reproducir rápidamente efectos de los años 80 o 90 con la ayuda del adorado trío de CSS/JS y SVG. Solo aplica el efecto a cualquier palabra y obtén el resultado deseado en segundos. Y no necesita meterse con la edición de fotos o programas 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 destacado fragmento de código de Gabrielle Wee. Su proyecto se llama Left the Country y se inspiró principalmente en el horror de los Duffer Brothers, "Stranger Things". Una gran cantidad de diseñadores y desarrolladores lo han reproducido. Dribbble y Codepen están repletos de versiones profesionales de la introducción del programa. Incluso hay un generador desarrollado por Nelson Cash que te permite recrear un logo con tus datos y descargar la imagen. Pero si quiere evitar todo lo estático, pruebe el fragmento de código de Wee que es una solución HTML y SCSS pura.

Sin vacante 404

No Vacancy 404 de Riley Shaw se parece mucho al trabajo anterior de Gabrielle Wee. Sus raíces se encuentran en el maravilloso arte lineal que se realza con un toque brillante y un efecto de parpadeo 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. Aunque, 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 de la vendimia

¿Necesita más efectos brillantes y ambiente estadounidense? Entonces deberías centrar tu atención en Vintage Neon Sign de Kyle Lavery. Se siente como salido de los anuncios de los años 60 que estaban superpoblados con letreros luminosos. La inteligente combinación de tubos de varios diámetros, el maravilloso efecto de brillo, la controvertida paleta de colores y el magnífico tipo de letra logran el truco, lo que da como resultado una excelente obra maestra basada en código.

División: invasores del espacio

Volvamos a los años 80 y fragmentos de código que presentan efectos tipográficos creados con este período en mente. 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 sabido recordárnoslo. Su Splitting: Space Invaders nos devuelve 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, que facilita las manipulaciones con CSS.

Jugando con la tipografía retro

No hay años 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 el logotipo de Atari hábilmente reproducido. También encontrarás cuatro efectos más que le dan un agradable toque retro al lettering.

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, New retro text de Vladimir Jovanovic, 80s Typography de David Parker y 404 SVG de Marcos Mellado. Mientras que los dos primeros proyectos utilizan tipografía audaz, superficie brillante, estilización de neón y colores drásticos para una cierta vibra 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.

Tipo de letra 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 fantásticos fragmentos de código: 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 luce clásico y majestuoso; el proyecto de Kevin Nagata se ve un poco moderno con cierto matiz juguetón.

Atrás en el tiempo

Si está harto y cansado de todo lo ultramoderno, sofisticado y de alta gama, entonces es hora de deshacerse del presente y buscar inspiración en el pasado. Créenos, siempre tiene un as en la manga. 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 ello. Son explosiones acogedoras y agradables del pasado que naturalmente llaman la atención, sintiéndose como un soplo de aire fresco.