O final do ano é o momento perfeito para aprender CSS com efeitos divertidos para o Ano Novo. Graças aos navegadores modernos, podemos fazer animações e efeitos interessantes e divertidos de forma leve e funcional. Que tal fazer um efeito neon divertido e interessante sem nenhum framework?
ATENÇÃO: Devido a quantidade de código e efeitos nesta página, pode apresentar lentidão se você for testar os exemplos abaixo em dispositivos móveis mais antigos (e até alguns mais recentes). Se você fizer o uso comedido, você não encontrará esse tipo de problemas.
Adicionando a Logo SVG
Para poder funcionar de forma leve, precisamos que a imagem que vamos adicionar seja em SVG. Dessa forma podemos manipular seus parâmetros de forma simples e adicionar efeitos.
Vários programas permitem exportar os objetos em SVG. Inkscape (que é de código aberto e gratuito), Illustrator ou CorelDRAW, todos eles possuem uma área de exportação específica.
No Illustrator, você pode usar a opção Exportar para Telas. Importante salientar que, para ficar com um melhor acabamento, coloque apenas contornos, sem preenchimento no objeto.
O resultado será um arquivo de extensão SVG. O interessante é que você pode abrir esse arquivo em qualquer editor de texto e ver os detalhes. Você deverá guardar esse arquivo para uso posterior no HTML.
Montando o HTML
Uma vez criado o SVG, precisamos montar o HTML. Para isso, basta criar a área e organizar as classes e ids de forma apropriada, ficando:
<div class="area_neon"> <center> <h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1> </center> </div>
Apenas isso.
Em seguida, vamos colocar o SVG acima do h1. Para isso, basta copiar o código gerado acima do SVG. Em seguida, adicione a classe específica que vamos usar no CSS e mude (caso necessário) para uma id mais fácil de compreender.
Ficando algo similar a:
<div class="area_neon"> <center> <svg class="neon_img" id="img_neon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.06 238.87"><path d="M189.39,53.25c9.32,0,16.87,7.85,16.87,17.54s-7.55,17.54-16.87,17.54-16.86-7.85-16.86-17.54,7.55-17.54,16.86-17.54m7.9,20.35a4.71,4.71,0,1,0-4.53-4.71,4.62,4.62,0,0,0,4.53,4.71m-7.9-26.35c-12.6,0-22.86,10.56-22.86,23.54s10.26,23.54,22.86,23.54,22.87-10.56,22.87-23.54S202,47.25,189.39,47.25Z"/><path d="M127,11.43c1.35,0,2.77,0,4.26,0,35.29.62,54.9,18.2,66,28.77,13.49,12.84,20.56,33,20.59,48.14,0,10.68-42.82,16-64.66,17.32-3.78.23-6.93.35-9.12.35-.59,0-1.1,0-1.55,0h-.41c-2.07,0-8.64.48-10.44,6.46-.32,1-1.23,6.3,2.46,6.3,1.3,0,3.17-.65,5.85-2.37a4.89,4.89,0,0,1,2.68-.89c4.62,0,6.69,8.54,5.11,9.14a2,2,0,0,1-.66.14c-1.25,0-1.54-1.8-1.56-4.17,0-1.4-1.78-2.23-3.59-2.23s-3.53.77-3.87,2.52c7.15,4.17,4.93,14.15,3.6,16.46-.3.53-.65.74-1,.74-1.14,0-2.18-2.4-1.19-3.17,1.29-1,3.47-3.36,2.28-6.13-1.09-2.52-2.4-3.86-4-3.86s-3.46,1.36-5.63,4.24c-1.56,2.05-2.59,2.81-3.86,2.81-2.26,0-5.25-2.45-13.19-4.32a20.2,20.2,0,0,0-4.66-.49,39.34,39.34,0,0,0-10.77,1.7c-19.4,5.66-43.45,25.47-33,59.46,5,16.33,16.27,22.2,27.42,22.2s22.05-5.79,26.72-12.88a15.84,15.84,0,0,0,1.65-3.22,31.73,31.73,0,0,0,1-3.51c1.78-7.59-.07-13.52-2.9-17.44-2.35-3.28-5.38-5.16-7.54-5.44,3.93,4.38-1.27,18.71-9.88,18.71a8.68,8.68,0,0,1-1-.06c-14-1.8-17-17.39-8.69-26.5a19.81,19.81,0,0,1,15-6.62,26.8,26.8,0,0,1,9.65,1.91,30.65,30.65,0,0,1,4.2,2c.41.24.8.49,1.19.76,11.21,7.84,13.5,30.64,3.89,47.88-6.57,11.8-18.72,21-37.41,21a63.65,63.65,0,0,1-7.51-.46c-1.1-.14-2.22-.3-3.36-.5-.51-.08-1-.16-1.55-.26A74.23,74.23,0,0,1,31.3,196.3C18.35,178.52,12.6,155,17.19,130.83,25.76,85.85,50.4,61,72.53,46.29a201.71,201.71,0,0,1,28.21-15.2c3.29-1.51-2.65-9.48-1.51-12.25,1.41-3.43,3.85-7.41,27.8-7.41m60.5,81.15c11.57,0,20.95-9.75,20.95-21.79S199.1,49,187.53,49s-20.95,9.75-20.95,21.79S176,92.58,187.53,92.58M127,5.43c-24.18,0-30.38,3.91-33.35,11.12-1.39,3.39-.07,6.87,1.1,10l.24.63A195.09,195.09,0,0,0,69.21,41.29C38,62,18.54,91.71,11.3,129.71c-4.73,24.85.79,50.41,15.15,70.13a80.46,80.46,0,0,0,50.06,32l1.27.22.4.07c1.32.22,2.51.4,3.64.53a68.58,68.58,0,0,0,8.23.51c18.86,0,34-8.54,42.66-24.06,11-19.83,8.39-45.86-5.7-55.71-.58-.41-1.12-.75-1.64-1.05a38.22,38.22,0,0,0-5-2.4,32.54,32.54,0,0,0-11.84-2.32,25.73,25.73,0,0,0-19.44,8.57,23.09,23.09,0,0,0-4.88,23.24c2.7,7.36,9,12.2,17.22,13.26a13.29,13.29,0,0,0,1.78.11c6,0,11.55-4,14.77-10.52a17.89,17.89,0,0,1-.29,7.33,24.29,24.29,0,0,1-.84,2.83,9.16,9.16,0,0,1-1,2c-3.25,4.94-12,10.18-21.71,10.18-7.38,0-17.13-3.12-21.69-18-3.56-11.62-2.91-22.08,1.94-31.08,5.2-9.64,15.3-17.44,27-20.86a33.17,33.17,0,0,1,9.09-1.46,14.3,14.3,0,0,1,3.28.33,47.43,47.43,0,0,1,8.41,2.82,15.44,15.44,0,0,0,6.16,1.66,8.84,8.84,0,0,0,4.83-1.44,8.36,8.36,0,0,0,.44,2.05,7.74,7.74,0,0,0,7.12,5.5,7.18,7.18,0,0,0,6.19-3.74,20.89,20.89,0,0,0,2.22-9.85,7.92,7.92,0,0,0,.78-.26c2.66-1,5.16-4,4.18-9.35a15.67,15.67,0,0,0-4.95-9c1.37,0,2.86-.13,4.43-.23,5.4-.33,24.35-1.68,41.4-5.27,13.47-2.84,28.92-7.45,28.9-18,0-15.51-7-37.75-22.46-52.48-10.14-9.65-31.24-29.74-70-30.42-1.5,0-3,0-4.36,0Zm60.5,81.15c-8.24,0-14.95-7.08-14.95-15.79S179.29,55,187.53,55s14.95,7.08,14.95,15.79-6.71,15.79-14.95,15.79Z"/></svg> <h1 id="texto_neon" class="neon">Bit Color | Velho Bit</h1> </center> </div>
Porém, para ficar mais legal, devemos usar uma tipografia mais apropriada. No Google Fonts podemos encontrar tipografias interessantes, com cantos arredondados, que nos darão resultados mais interessantes.
Uma vez escolhida a fonte, clique no Select this Font (no Google Fonts) e ele vai dar um código similar a este abaixo, que você deverá colocar dentro do header do seu HTML.
<link href="https://fonts.googleapis.com/css?family=Nunito:400" rel="stylesheet">
Trabalhando com o CSS
Neste momento precisamos pensar em instâncias. O Neon pode estar ligado ou desligado. Por isso, precisamos pensar nos objetos das duas formas.
Leia os comentários no código para entender o seu funcionamento.
<style> /* Configuração do container onde ficará os Neons */ .area_neon{ background-color: #0F0F0F; font-family: 'Nunito', sans-serif; left: 0; right: 0; bottom: 0; top: 0; padding: 20px; padding-top: 40px; position: absolute; } /* Base do Neon apagado (TEXTO). Iremos simular um efeito as lâmpadas de neon apagadas. */ .area_neon h1.neon{ font-weight: 400; font-size: 7em; /** O filtro BLUR deve ser mantido em 0, porque iremos usa-lo quando ligado. Para a animação de transição funcionar corretamente, ele precisa ser declarado mesmo desligado. **/ filter: blur(0); /** Para simular a lâmpada, colocaremos um contorno bem suave, para delimitar o objeto, porém com o fundo quase transparente **/ -webkit-text-stroke: 1px rgba(255,255,255,0.1); color: rgba(255,255,255,0.1); /** O TextShadow e o BackgroundClip irá servir para colocar um efeito de profundidade no objeto **/ text-shadow: -5px 5px 5px black; -webkit-background-clip: text; /** O Transition é responsável por adicionar uma sensação de animação entre os eventos. **/ transition: all ease 1s; } /**Texto com o Neon Ligado**/ .area_neon h1.neon.on{ /** Será fundametal o desfoque para dar a sensação de luminosidade. **/ filter: blur(1px); /** Um objeto com luz precisa possuir seu centro branco, caso contrário, vai dar a sensação de que está apenas com um sombreamento e não com luz. Por isso, devemos manter a cor branca, que vai representar o centro luminoso, e a borda da cor que desejamos usar. O TextShadow será a luminosidade do ambiente vinda da luz do Neon. O contorno e a sombra deverão ser da cor que você escolher para o neon, mas a cor do texto deverá ser sempre branca. **/ color: white; -webkit-text-stroke: 1px #00FFB3; text-shadow: 0 0 5px #CCFFF7, 0 0 200px #00FFDB; -webkit-background-clip: none; } /** O neon para a imagem SVG terá que ser um pouco diferente, mas podemos manter a mesma lógica. **/ .area_neon svg.neon_img{ width: 50%; margin: 0 auto; /** Ao invés de usarmos color, usaremos o parâmetro FILL para poder determinar a cor do objeto e o STROKE para a borda. Porém usaremos as mesmas lógicas usadas no Texto **/ fill: rgba(255,255,255,0.1); stroke: rgba(255,255,255,0.1); filter: blur(0) drop-shadow(-5px 5px 5px black); /** Usaremos o drop-shadow aplicado no filter, para poder ter o efeito similar ao do texto. **/ transition: all ease 1s; } /**SVG com o neon Ligado**/ .area_neon svg.neon_img.on{ /** Aqui aplicamos a mesma lógica usada no texto, porém adaptada para o tipo de objeto. **/ fill: white; stroke: #F0FF00; filter: blur(1px) drop-shadow(0 0 10px #F0FF00) drop-shadow(0 0 200px #F0FF00) ; } </style>
Ligando o Neon
Vamos usar o Javascript puro para ligarmos a luz. Tudo o que precisamos é adicionar on ao parâmetro classe das tags HTML correspondentes.
Para isso vamos criar a função turnOn():
<script> function turnOn(){ var texto = document.getElementById("texto_neon"); texto.className = texto.className.concat(" on"); var imagem = document.getElementById("img_neon"); imagem.setAttribute("class", imagem.getAttribute("class").concat(" on")); //Repare que temos que usar setAttribute no SVG. Isso porque o SVG não possui o mesmo comportamento de uma tag HTML comum } </script>
Agora vamos testar?
Você pode pegar o Código Completo deste tutorial diretamente no GitHub.
Todavia, também podemos ter outros efeitos interessantes seguindo essa mesma lógica.
Feliz ano novo com Contagem Regressiva
Sabre Jedi (liga/desliga) com Som
Lembrando que todos os códigos demonstrados aqui podem ser baixados pelo GitHub.
Deixe seu comentário e compartilhe este post. Curta a página do VelhoBit no Facebook! e entre para o grupo Design e Desenvolvimento.
Rodrigo Portillo
Gosto tanto de design que aprendi programação e regras para garantir a estabilidade de meus projetos. Trabalho e trabalhei com desenvolvimento full-stack em diversas linguagens, como Flex, PHP, Java, Javascript, dentre outras. Ainda trabalhei alguns anos como designer gráfico e ilustrador.
Busque mais informaçoes pelo LinkedIn.
