Pixels são os blocos de construção de muito do que vemos online. E quanto mais avançada a tecnologia de exibição, mais desses pequenos quadrados são exibidos em nossas telas. O resultado é que texto e imagens são incrivelmente nítidos.
Ainda assim, apesar de toda a beleza da alta tecnologia, há algo a ser dito pela simplicidade que a arte clássica baseada em pixels traz para a mesa. Ele não apenas lembra os velhos tempos, mas também pode ser uma técnica de design eficaz.
O que nos leva ao tópico de hoje: o uso de pixels como pano de fundo. No projeto certo, eles podem adicionar um elemento de diversão e uma quantidade surpreendente de criatividade. Vamos dar uma olhada em alguns trechos de código que mostram o potencial do pixel.
Um pixel para todos os fins
Este exemplo multifacetado mostra uma ampla variedade de opções de aparência e animação. Use o menu predefinido para escolher entre mais de 10 fundos diferentes de SVG. Muitos lembram um videogame retrô, e alguns são mais apropriados para o uso diário do que outros. De qualquer forma, esta coleção fornece uma base sólida do que é possível.
Veja a Pixel-Grid Pen (SVG Animations) de Scott Weaver
Elenco preto
Gradientes e pixels nunca pareciam se encaixar muito bem. Mas na era do design brutalista, eles andam juntos como Mario e Luigi. Este trecho demonstra um efeito aleatório interessante. Use JavaScript para dividir o plano de fundo em pequenos quadrados de diferentes opacidades. O resultado é uma obra de arte gerada que certamente atrairá a atenção do usuário.
Veja a caneta Pixelated CSS Gradient Generator de Eric Winton
Imagens de bom gosto
Aqui está um exemplo imperdível e feito com bom gosto. Quadrados grandes desaparecem em um padrão aparentemente aleatório, mas, felizmente, não são sobrecarregados. Este poderia ser um excelente acento de design para uma área de heróis, onde uma primeira impressão é fundamental.
Veja a caneta RKpBLg de Michael
Um efeito sutil
Se você está procurando um plano de fundo animado que não distraia seu conteúdo, vale a pena conferir este snippet simples. Embora tenha estilo semelhante ao exemplo anterior, é diferente porque a animação é executada apenas uma vez. É o suficiente para chamar a atenção sem o desconforto potencial do movimento se repetir uma e outra vez.
Veja a animação de fundo de pixel de penas de Oren
Máscara transformadora
Os pixels também podem desempenhar papéis complementares em um plano de fundo. Por exemplo, assista a este vídeo. Tornou-se mais interessante com uma sobreposição de padrão semelhante a pixel que poderia ser usada para exibir um logotipo simples, símbolo ou algo mais aleatório. Ainda melhor é que esse exemplo em particular muda de forma. Clique em qualquer lugar do vídeo para ver o padrão mudar.
Veja a caneta KaozXe de Micah Frost
Flutuadores
O que destaca esse trecho é a combinação de visual retrô e funcionalidade moderna. Criados com o Particles.js, esses pixels flutuantes lembram a arte espacial dos anos 50 e 60. Passe o mouse sobre uma área e seus pixels serão destacados em branco brilhante, enquanto um clique os força a se espalhar.
Veja o fundo de pixel de penas 2 por Alex
Manta CSS
Pixel art é uma ótima opção para um padrão quadriculado. As diferenças sutis entre os quadrados podem tornar algo atraente, mas não realista. Aqui, temos um padrão CSS bastante simples e puro que pode servir como plano de fundo, cabeçalho ou página inteira do herói.
Consulte a caneta Plano de fundo CSS pixelizado (Camo # 1) de Erik Wiedeman
Faça em 3D
Vamos dar uma olhada em outro ótimo exemplo de clássico e moderno. Este logotipo se tornou uma obra-prima interativa em 3D, graças ao CSS e jQuery. Passar o mouse sobre um quadrado acende, enquanto a perspectiva alterada faz com que os elementos no topo pareçam distantes. Certamente seria um cenário convincente.
Veja a caneta Logo Digibilly Pixel em CSS e Jquery com sobreposição de Joshua Pearson
Uma opção flexível para fundos
A vantagem inerente ao uso de fundos baseados em pixels é a sua versatilidade. Você pode, por exemplo, usar um plano de fundo com muitas animações bacanas. Ou talvez você prefira algo completamente estático. Depois, há a escolha entre um padrão muito aleatório e impressionante ou um que seja mais previsível.
Independentemente de suas necessidades, existe uma versão da técnica que se encaixa perfeitamente. Portanto, se você estiver procurando algo para ajudar seu site a se destacar, não negligencie os recursos de pixel.
Deseja ver mais exemplos? Dê uma olhada na nossa coleção de fundos de pixel CodePen.
