Todo ano a Pantone, maior empresa do mundo no ramo de sistemas de cores, elege as cores que serão usadas para representar o ano seguinte.
A ideia da empresa é, principalmente, criar um catálogo a fim de representar as tendências para o ano seguinte. Catálogo este criado pela The Pantone Color Institute, que busca utilizar de padrões e tons que são significativamente mais globais e genéricos em termos culturais, sobre o que se esperar do ano seguinte.
No ano de 2019, definiu-se que a cor que movimentaria o ano de 2020 foi o Classic Blue (19-4052):
As Cores de 2021: Otimismo e Força
Diante da maior crise sanitária da era moderna, a Pantone sugere que as cores de 2021 deverão representar o casamento entre otimismo e força, e escolheu como suas representantes as cores PANTONE 13-0647 Illuminating (similar ao amarelo canário) e o PANTONE 17-5104 Ultimate Gray (similar ao cinza elefante).
“Ao combinar PANTONE 17-5104 Ultimate Grey e PANTONE 13-0647 Illuminating para ser nossa cor Pantone do ano em 2021, destacamos como dois elementos diferentes se unem para expressar uma mensagem de força e esperança, que é ao mesmo tempo duradoura e edificante, transmitindo a ideia de que não se trata de uma cor ou de uma pessoa, é sobre vários”. — disse Laurie Pressman, vice presidente da Pantone Color Institute. — “Elas comunicam uma compreensão mais profunda da importância dos relacionamentos e da necessidade que temos uns dos outros. A união dessas duas cores diferentes mostra a força e o otimismo que resultam da junção de diferentes ingredientes”.
É importante salientar que Pantone é uma empresa privada e seus sistemas são proprietários, então você não deverá encontrar atualizações em paletas automatizadas em aplicativos como GIMP e Inkscape, mas nada impede que você crie suas próprias paletas manualmente, replicando as cores, ou até encontre algumas na internet feitas por terceiros.
Todavia, as cores e assets já estão disponíveis em serviços como o Adobe Stock e Freepik Premium:
Algumas variações de paletas usando as cores Pantone 2021 já estão disponíveis publicamente no Adobe Color. Dessa forma, já é possível usar as cores em novos projetos através da Creative Cloud, no Adobe XD, Illustrator, Photoshop e InDesign, além de plataformas para projetos de mídias sociais e vídeos, nos dispositivos móveis.
Brasil
No Brasil, através do Twitter, algumas pessoas tem manifestado reações sobre a decisão da Pantone.
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.
Opção de Exportar para Telas, no Adobe Illustrator CC
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:
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.
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.
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>
