El pixel art es una de esas formas de arte perdidas que han sido eclipsadas por imágenes súper nítidas y de alta resolución. Me encontré con un pixel art mientras navegaba por CodePen y me recordó lo increíble que es.
Vea el CSS de Pen Pikachu pixel por Devi Krisdiansyah (@agilBAKA) en CodePen.
¡¿Cuan genial es eso?! Los gráficos pixelados tienen algo que agrega una capa de simplicidad y amabilidad que puede perderse en imágenes e ilustraciones de alta definición.
También es un gran ejemplo de cómo podemos crear pixel art usando HTML y CSS. Analicemos este concepto y creemos un patrón que podamos usar en otros casos.
Crear una cuadrícula
Lo primero es lo primero. Necesitamos un lienzo para pintar nuestra obra maestra pixelada. Esta es realmente una cuadrícula que podemos crear de dos formas diferentes.
Una forma sería un HTML estándar <table> que contiene un montón de celdas de ancho fijo en cada fila. Por ejemplo, digamos que dibujamos una tabla perfectamente cuadrada que tiene ocho columnas de ancho y ocho filas de profundidad. Si hacemos que cada celda sea de 10 píxeles cuadrados, entonces tenemos una tabla de 80 píxeles de ancho y alto:
Consulte el ejemplo de cuadrícula de tabla de píxeles de CSS de la pluma de Geoff Graham (@geoffgraham) en CodePen.
¿Quieres un lienzo más grande? Dale a las celdas una dimensión más grande. ¿Quieres duplicar la resolución? Duplique el número de celdas en cada fila de la tabla.
La otra forma de configurar una cuadrícula es deshacerse de la tabla y reemplazarla con dos divs: uno que actúa como contenedor para nuestro lienzo y otro que se puede repetir tantas veces como queramos para representar cada píxel en el lienzo.
<div class="canvas">
<div class="pixel"></div>
<!-- Repeat as many times as needed -->
</div><!-- end .canvas -->El truco aquí es saber exactamente cuántos píxeles crear. Para eso, podemos multiplicar el número de píxeles de ancho por el número de píxeles de alto. Por ejemplo, si creamos el mismo 80px cuadrícula cuadrada como método de tabla y queremos una cuadrícula de 8 píxeles de ancho por 8 píxeles de alto, entonces podemos multiplicarlos para un total de 64 píxeles.
.canvas {
/* Perfectly square */
width: 80px;
height: 80px;
}
.pixel {
/* We'll need 64 total pixels in our HTML */
width: 10px;
height: 10px;
float: left;
}Consulte el ejemplo de Pen CSS Pixels – Div de Geoff Graham (@geoffgraham) en CodePen.
Lo que me gusta de este método es que es más fiel a las dimensiones del lienzo que definimos. También me resulta más fácil no tener que trabajar con el marcado HTML adicional que viene con table.
Si queremos más píxeles para crear un patrón más detallado, entonces podemos cuadriplicar el número de píxeles en nuestro marcado HTML y cortar el tamaño de nuestros píxeles a la mitad. Esto es como hacer una imagen en Photoshop que tiene el doble del tamaño de las dimensiones que planea usar en la página para crear una resolución más alta.
.canvas {
/* Perfectly square */
width: 80px;
height: 80px;
}
.pixel {
/* We'll need 256 total pixels in our HTML */
width: 5px;
height: 5px;
float: left;
}Empezar a pintar
Aquí es donde la goma se encuentra con la carretera en el sentido de que agregamos color a nuestros píxeles. Podemos usar el nth-child atributo para seleccionar píxeles específicos en la cuadrícula.
/* The third cell in our grid */
.pixel:nth-child(3) {
background: orange;
}Como puede imaginar, esta lista se volverá muy larga muy rápidamente dependiendo de la cantidad de celdas en la cuadrícula y la cantidad de detalles que requiera el diseño. El ejemplo de apertura de esta publicación utiliza un total de 1.920 píxeles en la cuadrícula y más de 300 selectores secundarios diferentes. ¡Uf!
Un ejemplo simple
Decidí hacer un autorretrato pixelado. Es bastante simple ya que elegí muy pocos píxeles y solo cuatro colores en total.
Vea Píxeles CSS del lápiz: autorretrato de Geoff Graham (@geoffgraham) en CodePen.
CSS Pixel Art como icono
Ahora que tenemos algo con lo que trabajar, podemos usar el transform propiedad para reducir nuestra obra de arte y usarla como un icono:
Vea el ícono Pen CSS Pixels – Autorretrato – de Geoff Graham (@geoffgraham) en CodePen.
Otras técnicas de dibujo de píxeles
sombra de la caja
Puede dibujar arte de píxeles dentro de un solo elemento utilizando un gran complicado box-shadow! Si declara un desplazamiento vertical y horizontal para la sombra del cuadro, pero no un radio de extensión o desenfoque, obtendrá una copia limpia y coloreada de la forma del elemento para moverse.
Este es el concepto. El “píxel” negro es el original, y he creado un píxel naranja en la parte inferior izquierda y un píxel rojo en la parte inferior derecha.
Consulte los conceptos básicos del lápiz sobre Pixel Art de Chris Coyier (@chriscoyier) en CodePen.
Podrías volverte loco con eso y hacer dibujos completos.
Vea Pen Pixel Hellboy de servin (@servinlp) en CodePen.
Preprocesamiento
Las variables podrían ayudar a facilitar el ajuste de colores y tamaños, etc. Aquí hay un ejemplo en Menos:
Vea la pacwoman inconformista Pen Pixel-art de Mario Sanz (@msanz) en CodePen.
Aquí hay un ejemplo de Una Kravets que da un paso más en la creación de la sombra del cuadro con un mapa de Sass, que es bastante inteligente:
// Setting the colors we're syncing up with
$pixel-color-map: (
'r' : #f00,
'w': #fff,
'k': #000,
'o': transparent,
't': #83401f,
'p': #ffbc77,
'b': #06f,
'y': #ff0,
'n': #ff8000,
'g': #5ac528
);
// Mario pixel art matrices!
$pixel-art:(
mushroom: (
(o o o o o k k k k k k o o o o o)
(o o o k k r r r r w w k k o o o)
(o o k w w r r r r w w w w k o o)
(o k w w r r r r r r w w w w k o)
(o k w r r w w w w r r w w w k o)
(k r r r w w w w w w r r r r r k)
(k r r r w w w w w w r r w w r k)
(k w r r w w w w w w r w w w w k)
(k w w r r w w w w r r w w w w k)
(k w w r r r r r r r r r w w r k)
(k w r r k k k k k k k k r r r k)
(o k k k w w k w w k w w k k k o)
(o o k w w w k w w k w w w k o o)
(o o k w w w w w w w w w w k o o)
(o o o k w w w w w w w w k o o o)
(o o o o k k k k k k k k o o o o)
)
);Hay algunas funciones más allí para convertir eso en el cuadro de sombra y aplicarlo. Aquí está el resultado final:
¡Vea el arte de píxeles de sombras de caja generado por Pen Sass! por Una Kravets (@una) en CodePen.
¡Recuerde que box-shadow también se puede animar!
Vea el Pixel Art de Pen Ash y Pikachu con sombra de caja de Andrew (@AstroDroid) en CodePen.
Lienzo
El <canvas> ¡Las API ciertamente pueden dibujar rectángulos!
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(53, 41, 15)";
ctx.fillRect(48, 0, 8, 8);
ctx.fillStyle = "rgb(238, 187, 68)";
ctx.fillRect(56, 0, 8, 8);Vea el Pen Canvas Ark de Terranigma por Max (@MyXoToD) en CodePen.
SVG
Y por supuesto <svg> posee <rect>. Pero incluso podrías engañar un poco y hacer <polygon>s que combinan varios píxeles.
Vea el Pen Pixel me de Aloïs De Schepper (@ Alo62) en CodePen.
3D!
Ok, creo que hemos hecho suficiente aquí.
Vea Pen 3D Pixel Art de cx20 (@ cx20) en CodePen.
¡Es tu turno!
Siempre somos fanáticos de que hagas las cosas a tu manera, pero debes saber que ya existen algunas herramientas para dibujar con píxeles:
- Generador de arte de píxeles con sombra de caja de lienzo de Ludvig Lindblom
- ¡Jenn Schiffer hace arte de 8 bits!
- Hacer Pixel Art de XOXCO
- Pixel Art to CSS Generator de Javier Valencia
¿Ha creado arte de píxeles CSS que estaría dispuesto a compartir? Creé una colección en CodePen, pero publique sus ejemplos en los comentarios a continuación para que podamos disfrutar de la genialidad.