8 fragmentos creativos de CSS y JS para crear fondos pixelados

Los p√≠xeles son los componentes b√°sicos de gran parte de lo que vemos en l√≠nea. Y cuanto m√°s avanzada sea la tecnolog√≠a de visualizaci√≥n, m√°s de estos peque√Īos cuadrados se muestran en nuestras pantallas. El resultado es que tanto el texto como las im√°genes son incre√≠blemente n√≠tidos.

A√ļn as√≠, a pesar de toda esa belleza de alta tecnolog√≠a, hay algo que decir sobre la simplicidad que el arte cl√°sico basado en p√≠xeles trae a la mesa. No solo nos recuerda los viejos tiempos, sino que tambi√©n puede ser una t√©cnica de dise√Īo efectiva.

Lo que nos lleva al tema de hoy: el uso de píxeles como fondo. En el proyecto correcto, pueden agregar un elemento de diversión y una sorprendente cantidad de creatividad. Echemos un vistazo a algunos fragmentos de código que muestran el potencial del píxel.

Un píxel para cada propósito

Este ejemplo multifac√©tico muestra una amplia gama de apariencias y opciones de animaci√≥n. Use el men√ļ preestablecido para elegir entre m√°s de 10 fondos SVG diferentes. Muchos recuerdan a un videojuego retro, y algunos son m√°s apropiados para el uso diario que otros. En cualquier caso, esta colecci√≥n proporciona una base s√≥lida de lo que es posible.

Ver la pluma
Pixel-Grid (Animaciones SVG) por Scott Weaver

Fundido en negro

Los gradientes y los p√≠xeles nunca parec√≠an encajar muy bien. Pero en la era del dise√Īo brutalista, van juntos como Mario y Luigi. Este fragmento demuestra un interesante efecto aleatorio. Utiliza JavaScript para dividir el fondo en peque√Īos cuadrados de diferentes opacidades. El resultado es una obra de arte generada que sin duda atraer√° la atenci√≥n del usuario.

Ver la pluma
Generador de gradiente CSS pixelado por Eric Winton

Cuadros de buen gusto

Aqu√≠ hay un ejemplo que es imperdible y hecho con buen gusto. Los cuadrados grandes se desvanecen en un patr√≥n aparentemente aleatorio, pero afortunadamente no se abruman. Esto podr√≠a ser un gran acento de dise√Īo para un √°rea de h√©roe, donde la primera impresi√≥n es clave.

Ver la pluma
RKpBLg por Michael

Un efecto sutil

Si está buscando un fondo animado que no distraiga su contenido, vale la pena echarle un vistazo a este simple fragmento. Si bien es similar en estilo al ejemplo anterior, es diferente en que la animación solo se ejecuta una vez. Es suficiente para llamar la atención sin la molestia potencial del movimiento que se repite una y otra vez.

Ver la pluma
animación de fondo de píxeles por Oren

M√°scara transformadora

Los p√≠xeles tambi√©n pueden desempe√Īar papeles complementarios dentro de un fondo. Por ejemplo, mira este video. Se hizo m√°s interesante con una superposici√≥n de patr√≥n similar a un p√≠xel que podr√≠a usarse para mostrar un logotipo, s√≠mbolo o algo m√°s aleatorio simple. A√ļn mejor es que este ejemplo particular cambia de forma. Haga clic en cualquier parte del video para ver el cambio de patr√≥n.

Ver la pluma
KaozXe por Micah Frost

Flotadores

Lo que hace que este fragmento se destaque es su combinaci√≥n de aspecto retro y funcionalidad moderna. Creado con part√≠culas.js, estos p√≠xeles flotantes recuerdan el arte espacial de los a√Īos 50 y 60. Despl√°cese sobre un √°rea y sus p√≠xeles se resaltar√°n en blanco brillante, mientras que un clic los obliga a dispersarse.

Ver la pluma
pixel background 2 por Alex

CSS Plaid

Pixel art es una gran opción para un patrón a cuadros. Las sutiles diferencias entre los cuadrados pueden formar algo atractivo, aunque no de forma realista. Aquí tenemos un patrón CSS bastante simple y puro que podría servir como fondo para un héroe, un encabezado o una página completa.

Ver la pluma
Fondo CSS pixelado (Camo # 1) por Erik Wiedeman

Hazlo en 3D

Echemos un vistazo a otro gran ejemplo de clásico-cumple-moderno. Este logotipo se ha convertido en una obra maestra interactiva en 3D, gracias a CSS y jQuery. Al pasar el cursor sobre un cuadrado se ilumina, mientras que la perspectiva cambiada hace que los elementos en la parte superior se vean muy lejos. Sin duda sería un fondo convincente.

Ver la pluma
Logotipo de Digibilly Pixel en CSS y Jquery con superposición por Joshua Pearson

Una opción flexible para fondos

La ventaja inherente de usar fondos basados ‚Äč‚Äčen p√≠xeles es su versatilidad. Puede, por ejemplo, ir con un fondo que presenta mucha animaci√≥n ingeniosa. O tal vez prefiera algo completamente est√°tico. Luego est√° la opci√≥n entre un patr√≥n muy aleatorio y llamativo o uno que sea m√°s predecible.

Independientemente de sus necesidades, existe una versión de la técnica que se adapta perfectamente. Entonces, si está buscando algo para ayudar a que su sitio se destaque, no pase por alto las posibilidades de los píxeles.

¬ŅQuieres ver m√°s ejemplos? Echa un vistazo a nuestra colecci√≥n de fondos de p√≠xeles de CodePen.