10 incríveis efeitos de tipo retrô CSS e HTML

Hipstamatic, Spotify e agora Adidas: parece que nossa sociedade tem um desejo enorme por velhos tempos e velhos costumes. Talvez nosso mercado esteja tão saturado com tudo de alta tecnologia e inovação que estamos começando a ficar entediados. Ou talvez seja apenas uma nostalgia banal dos velhos tempos em que tudo parecia fácil, simples e cor-de-rosa. A obsessão atual com tudo do passado recente é evidente. Pode ser visto em todos os lugares, e a esfera do web design não é exceção.

Aliás, o estilo retrô se manifesta de tempos em tempos na web. Ele mostra através de paletas de cores retrô pastel, efeitos duotônicos, estampas geométricas simplificadas demais, ilustrações art-deco, efeitos granulados e barulhentos, imagens semelhantes a Polaroid, layouts inspirados em tablóides, cenários retirados dos jogos da velha escola e, claro, old-school. tipografia oportuna.

Falando nisso, a tipografia é uma das opções mais populares quando se trata de incutir uma sensação retrô em um projeto. É sutil e de bom gosto. E, o mais importante, não sobrecarrega nem sobrecarrega o projeto. É apenas um toque final perfeito que chama a atenção e estabelece uma atmosfera adequada.

Além disso, você pode reproduzir rapidamente efeitos dos anos 80 ou 90 com a ajuda do amado trio CSS/JS e SVG. Basta aplicar o efeito a qualquer palavra e obter o resultado desejado em segundos. E você não precisa mexer com edição de fotos ou programas relacionados a design, como Photoshop ou Sketch, para fazer alterações. Simples e elegante, não é?

Se você é daqueles que aprecia essa maneira de fazer as coisas, reunimos 10 trechos de código com incríveis efeitos de tipografia retrô. Vamos dar uma olhada:

Deixou o país

Não poderíamos deixar de começar nossa coleção com este excelente trecho de código de Gabrielle Wee. Seu projeto se chama Left the Country e foi inspirado principalmente pelo horror dos irmãos Duffer, “Stranger Things”. Muitos designers e desenvolvedores o reproduziram. Dribbble e Codepen estão repletos de versões profissionais da introdução do programa. Existe até um gerador desenvolvido por Nelson Cash que permite recriar um logotipo com seus dados e baixar a imagem. Mas se você quiser evitar tudo estático, experimente o trecho de código de Wee que é uma solução HTML e SCSS pura.

Sem vaga 404

No Vacancy 404 de Riley Shaw é muito parecido com o trabalho anterior de Gabrielle Wee. Suas raízes estão na maravilhosa arte de linha que é aprimorada com um toque brilhante e efeito piscante para maior realismo. Isso nos lembra de todos aqueles letreiros de néon brilhantes que eram cada vez mais populares em meados do século passado na América. No entanto, talvez eles não parecessem tão elegantes e refinados quanto a obra-prima de Riley Shaw. A solução é uma simbiose de elegância, sofisticação e apelo vintage.

Sinal de néon antigo

Precisa de mais efeitos brilhantes e vibração americana? Então você deve voltar sua atenção para Vintage Neon Sign de Kyle Lavery. Parece que saiu de anúncios dos anos 60 que estavam superpovoados com sinais luminosos. A combinação inteligente de tubos de vários diâmetros, efeito brilhante maravilhoso, paleta de cores controversa e o magnífico tipo de letra fazem o truque, resultando em uma excelente obra-prima alimentada por código.

Divisão: Invasores do Espaço

Vamos voltar aos anos 80 e trechos de código que apresentam efeitos tipográficos feitos com esse período em mente. Em primeiro lugar, os anos 80 e 90 foram todos sobre videogames. Nossa infância foi tão adorável. E Martin Pitt é um dos que conseguiu nos lembrar disso. Seu Splitting: Space Invaders nos traz de volta à adolescência. Essa realização encanta com vibrações positivas e brincadeiras. Parece fofo e sonhador. Ele foi criado com a ajuda da biblioteca Splitting, que facilita as manipulações com CSS.

Brincando com tipografia retrô

Não há anos 90 sem jogos de arcade jogados no console de videogame doméstico Atari. É apenas um sinônimo dos anos 80 e 90 no mundo Geek. E Max Kohler sabe disso perfeitamente. Seu codepen dedicado à tipografia retrô apresenta o logotipo da Atari habilmente reproduzido. Você também encontrará mais quatro efeitos que dão às letras um agradável toque retrô.

Novo texto retrô / tipografia dos anos 80 / 404 SVG

Existem vários efeitos de texto fantásticos em nossa coleção que trazem à mente algumas doces lembranças relacionadas à TV. Por exemplo, New retro text de Vladimir Jovanovic, 80s Typography de David Parker e 404 SVG de Marcos Mellado. Enquanto os dois primeiros projetos utilizam tipografia ousada, superfície brilhante, estilização de neon e cores drásticas para uma certa vibe de introdução retrô VHS, o segundo está parecendo um pouco rústico, mundano e bruto – assim como videoclipes na MTV daquele período.

Tipo de letra vintage / título vintage incrível

Esta não seria uma coleção completa de efeitos de tipografia retrô sem algumas soluções tradicionais. E temos dois trechos de código fantásticos: Vintage Typeface de Thibault Jan Beyer e Awesome Vintage Title de Kevin Nagata. Ambos apresentam uma tipografia vintage tradicional, como estamos acostumados a imaginar: ultrafinas com letras cada vez mais alongadas, um sutil toque art-deco e, claro, uma sombra que é o coração e a alma da obra. Enquanto o projeto de Thibault Jan Beyer parece clássico e majestoso; o projeto de Kevin Nagata parece um pouco moderno com um certo tom lúdico.

De volta no tempo

Se você está cansado de tudo que é ultramoderno, sofisticado e sofisticado, é hora de abandonar o presente e buscar inspiração no passado. Acredite, sempre tem um ás na manga. Nem uma vez deixa de salvar o dia.

Oferece aos designers tendências e soluções que permitem que um projeto se destaque da multidão. E os efeitos de tipografia retrô são o exemplo perfeito disso. São explosões acolhedoras e agradáveis ​​do passado que naturalmente chamam a atenção, parecendo uma lufada de ar fresco.