12 efeitos de néon retrô impressionantes em web design

Evoluído a partir do tubo Geissler, o letreiro de neon foi um traço característico da América dos anos 1920 aos anos 60. Ele marcou várias décadas e criou sua própria era distinta - uma era de noites brilhantes e coloridas com letreiros de neon em cada esquina.

Sem dúvida, o letreiro de néon é coisa do passado. É sinônimo de estilo retrô. Mas não é tão monótono quanto as coisas arcaicas dos bons velhos tempos. Tem um entusiasmo; tem uma vibração. Sua natureza colorida e personalidade brilhante o mantêm vivo.

E mesmo que a tendência de usar letreiros de néon esteja morrendo na vida real, dando lugar a soluções “verdes” mais sofisticadas e elegantes, ainda há lugares para vê-lo nas extensões online. É aqui que ele pode trazer seu carisma em jogo. E dado o fato de que uma onda de nostalgia varreu o mundo, um letreiro de neon pode se tornar um candidato ideal para criar designs que atendam ao mainstream de hoje.

Existem várias maneiras de introduzir um toque retro fluorescente em sua interface. O mais óbvio e fácil é usá-lo como uma escolha estilística para mostrar placas de identificação, slogans ou apenas os detalhes baseados em texto de um site. Hoje, vamos mostrar alguns trechos de código excelentes que dão vida a esse efeito.

Sinal de neon Hot Ones por Aaron Minnamon

O projeto de Aaron Minnamon tem um sentido distinto do estilo urbano americano dos anos 50. É brilhante, ousado e ousado. Parece autêntico, graças ao comportamento habilmente reproduzido dos letreiros de néon que são famosos por piscar constantemente. Esta pequena mas impressionante animação ganhou vida com a ajuda de HTML, SCSS e JavaScript.

Sinal de néon animado CSS por Nodws / Neon de Las Vegas por Riccardo Tartaglia

Tanto Nodws, com seu fantástico projeto dedicado ao Dribble, quanto Riccardo Tartaglia, com seu excelente Neon de Las Vegas, seguiram uma rota tradicional. Eles criaram conceitos que imitam perfeitamente os letreiros convencionais de neon.

As demos são parecidas. Cada um apresenta sinais de néon colocados contra uma parede de tijolos. Ambos são enriquecidos com pequenas dinâmicas para dar vida à cena; e cada um tem uma aparência brilhante. Os artistas conseguiram sobreviver em apenas várias linhas de código HTML e CSS, tornando as soluções não apenas agradáveis ​​aos olhos – mas também leves.

Letreiro de néon vintage de Kyle Lavery

Se você precisa de um toque vintage inconfundível em seu site, experimente o Vintage Neon Sign de Kyle Lavery. Exala os anos 60 em todas as frentes. A tipografia delineada, temperada com cores neon e apoiada por um belo plano de fundo em estilo de tubo, parece fantástica. Mesmo que as letras não sejam definidas em tipo decorativo, sem dúvida adicionarão um toque sofisticado a qualquer projeto.

Projeto de Prima Utama Apriansyah

O projeto de Prima Utama Apriansyah apresenta um efeito neon que é revelado ao passar o mouse. São três opções de cores: vermelho, azul e amarelo. Cada um parece ótimo. Tudo é feito com puro HTML e CSS – sem necessidade de JavaScript. A vantagem desta solução é que o efeito neon fica oculto e impressiona os visitantes quando revelado.

Carregadores de grade de néon por Mai El-Awini

Ok, isso é o suficiente dos efeitos de texto. Vamos considerar algumas outras maneiras de adicionar alguma magia fluorescente à interface. Uma das alternativas é aplicar um estilo neon para carregar animações, como Mai El-Awini fez com Neon Grid Loaders.

Aqui você encontrará quatro carregadores diferentes que estão vinculados a um tema e coloração. Mesmo sendo primitivos, o efeito neon certamente os leva ao próximo nível. Contra um fundo escuro, eles parecem simplesmente fabulosos. Eles vão entreter os visitantes enquanto esperam que seu site termine todos os preparativos.

Botão Simone / Botão Neon Elwin van den Hazel

Outros detalhes da interface também podem se beneficiar do estilo neon. Por exemplo, considere botões. Como os apelos à ação “fantasmas” ainda são populares, o efeito neon simplesmente não poderia ser mais adequado.

Existem dois excelentes trechos de código para experimentar: um é feito por Simone e outro por Elwin van den Hazel. Ambos incluem um botão neon simples, mas elegante e sutil. Enquanto o primeiro é um pouco sombrio devido à coloração suave, o segundo certamente chama a atenção imediatamente com seu tom azul vibrante e efeito brilhante. Tudo é feito com puro HTML e CSS.

Caixas de diálogo de néon por Hugo DarbyBrown

Você também pode aplicar o estilo neon às caixas de diálogo. Basta dar uma olhada em Neon Dialog Boxes de Hugo DarbyBrown. O autor incluiu quatro painéis de diálogo convencionais. Eles parecem ousados ​​e atraentes, mas sem gritar em todas as frentes. O efeito neon deu aos elementos banais da interface do usuário uma boa reviravolta.

neon hexagrid por Matei Copot / Neon Hex Particles – Recreation por Brett / por um tempo por Gerard Ferrandez

Embora consideremos os estilos de néon como um efeito que pode ser aplicado a detalhes independentes de um site (como botões, tipografia ou carregador), ele também pode facilmente criar um plano de fundo matador. Considere o neon hexagrid de Matei Copot, Neon Hex Particles – Recreation de Brett e por um tempo de Gerard Ferrandez.

Matei Copot oferece aos visitantes online um fantástico fundo de estilo favo de mel inspirado em neon, onde cada célula tem sua própria vida útil. A coloração muda de roxo para turquesa e parece inspiradora.

O conceito de Brett tem uma nota de mistério. Também é baseado em uma forma hexagonal, mas desta vez você também pode ver uma animação de revelação. O padrão aparece no centro e cresce para os lados. Há um painel de controle onde você pode brincar com as configurações.

Ao contrário dos dois exemplos anteriores, o projeto de Gerard Ferrandez apresenta uma visão moderna do estilo neon. Aqui você encontrará milhares de pequenas partículas que formam um retângulo. Use o cursor do mouse para perturbar a superfície plana e levantar uma onda marcada por um tom de néon dourado.

Exemplos brilhantes

Embora o efeito neon não faça nada incomum, ainda é uma daquelas coisas que instantaneamente chamam a atenção. É uma ótima ferramenta para tornar os detalhes de um site mais proeminentes.

Ele pode ser usado para definir pontos focais ou apenas apimentar um pouco as coisas com o carisma brilhante da natureza fluorescente. Combina perfeitamente com tipografia, botões e até fundos.

Sim, tem uma grande desvantagem – revela sua beleza e potencial apenas em um ambiente escuro. Portanto, se você estiver usando uma interface do usuário mais leve, não é a melhor escolha. Mas se você tiver alguns designs escuros em mente, o efeito neon pode se tornar um instrumento perfeito para impressionar seus visitantes.