Fun CSS Pixel Art

Original address: https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

Friendly reminder: Due to domestic network issues, CodePen may not be able to open or may be very slow, please be patient!

Pixel art is a lost art form that pales in comparison to ultra-clear, high-resolution pictures. I stumbled across some pixel art while browsing on CodePen and it reminded me how awesome this art can be!

See the Pen Pikachu pixel css by Devi Krisdiansyah (@agilBAKA) on CodePen.

Isn’t it cool? There's something simple and friendly about pixelated graphics that's missing from high-definition graphics and illustrations.

This is also a great example of how to create pixel art with HTML and CSS. Let's analyze this concept and create a pattern that can be used in other situations.

Create grid

First thing, we need a canvas to draw our pixelated artwork on. There are many ways to create a grid. One way is to use the standard HTML <table> element, which contains fixed-width cells for each row. For example, we draw a perfect square with eight rows and eight columns. If we set each cell to 10px wide, then we will get an 80X80 table.

See the Pen CSS Pixels - Table Grid Example by Geoff Graham (@geoffgraham) on CodePen.

Give the cell a larger size if you want a larger canvas. If you want to change from 8-bit resolution to 16-bit resolution, you only need to double the number of cells in each row of the table.

Another way to create a grid is to use two divs instead of tables. One of them acts as a container for the canvas; the other represents the elements on the canvas and can be repeated as many times as we need.

<span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="canvas"</span><span style="color: #0000ff;">></span>
  <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="pixel"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
  <span style="color: #008000;"><!--</span><span style="color: #008000;"> Repeat as many times as needed </span><span style="color: #008000;">--></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span><span style="color: #008000;"><!--</span><span style="color: #008000;"> end .canvas </span><span style="color: #008000;">--></span>

The reason I like this is that it's more realistic to the canvas size we defined. And I think this way is simpler without writing extra HTML tags from the table element.

If we want more pixels to create a clearer pattern, then we can double the number of pixels in the HTML tag and halve the size of each pixel. It's as if you created an image in Photoshop that you intended to use on a web page and doubled its size to get a higher resolution.

<span style="color: #800000;">.canvas </span>{
  <span style="color: #008000;">/*</span><span style="color: #008000;"> Perfectly square </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 80px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 80px</span>;
}<span style="color: #800000;">

.pixel </span>{
  <span style="color: #008000;">/*</span><span style="color: #008000;"> We'll need 256 total pixels in our HTML </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
  height</span>:<span style="color: #0000ff;"> 5px</span>;<span style="color: #ff0000;">
  float</span>:<span style="color: #0000ff;"> left</span>;
}

Start drawing

We add color to pixels in a sense like rubber meets road. We can select elements in the grid using the nth-child attribute.

<span style="color: #008000;">/*</span><span style="color: #008000;"> The third cell in our grid </span><span style="color: #008000;">*/</span><span style="color: #800000;">
.pixel:nth-child(3) </span>{<span style="color: #ff0000;">
  background</span>:<span style="color: #0000ff;"> orange</span>;
}

正如你想象的那样，这个列表会很长，它取决于网格中的单元格的数量和设计的细节。文章开头的例子中使用了1920个像素并且超过300个子类选择器。天哪！

 

一个简单的例子

我决定做一张像素化的自画像。这个例子很简单，因为它的像素很少并且总共只有四种颜色。

See the Pen CSS Pixels - Self Portrait by Geoff Graham (@geoffgraham) on CodePen.

 

 

作为Icon的CSS像素艺术

既然我们已经有了素材，我们可以 使用 transform 属性缩小图片把它作为icon使用。

See the Pen CSS Pixels - Self Portrait - Icon by Geoff Graham (@geoffgraham) on CodePen.

 

 

其他的像素绘制技术

1.box-shadow

你可以用一个元素通过复杂的 box-shadow 属性绘制像素艺术。如果你声明一个 box-shadow 的垂直和水平偏移，而没有模糊值及阴影半径，你将得到一个可以随意移动的元素形状的彩色复制体。

以下是概念实例。黑色元素是初始形状，我已经在左下角创建了一个橙色像素以及在右下角创建了一个红色像素。

See the Pen Basics of Pixel Art by Chris Coyier (@chriscoyier) on CodePen.

你可以疯狂的使用这种方式绘制整个图案。

See the Pen Pixel Hellboy by servin (@servinlp) on CodePen.

 

2.预处理

变量可以更容易地调整颜色和大小等。

以下是less编写的例子。

See the Pen Pixel-art hipster pacwoman by Mario Sanz (@msanz) on CodePen.

这是Una Kravets编写的例子， 他更进一步地使用Sass map 创建box-shadow，很聪明的方法。

<span style="color: #800000;">// 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)
  )
);</span>

有很多函数可以把它转换成box-shadow并且应用它。下面是最终结果。

See the Pen Sass-Generated Box Shadow Pixel Art! by Una Kravets (@una) on CodePen.

记住box-shadow也可以做动画。

See the Pen Ash and Pikachu box-shadow Pixel Art by Andrew (@AstroDroid) on CodePen.

 

3.canvas

 <canvas> 肯定可以绘制矩形。

<span style="color: #0000ff;">var</span> canvas = document.getElementById("canvas"<span style="color: #000000;">);
</span><span style="color: #0000ff;">var</span> ctx = canvas.getContext("2d"<span style="color: #000000;">);
  
ctx.fillStyle </span>= "rgb(53, 41, 15)"<span style="color: #000000;">;
ctx.fillRect(</span>48, 0, 8, 8<span style="color: #000000;">);
ctx.fillStyle </span>= "rgb(238, 187, 68)"<span style="color: #000000;">;
ctx.fillRect(</span>56, 0, 8, 8);

See the Pen Canvas Ark from Tranigma by Max (@MyXoToD) on CodePen.

4.svg

Although <svg> has <rect> , but you can be opportunistic and use < which contains more pixels polygon> ; .

See the Pen Pixel me by Aloïs De Schepper (@Alo62) on CodePen.

5.3D!

Okay, I think we’ve done enough.

See the Pen 3D Pixel Art by cx20 (@cx20) on CodePen.

It’s your turn

We’re always keen for you to do things your own way, but know that there are plenty of tools out there for drawing pixel art.

• Ludvig Lindblom's Canvas box-shadow pixel art generator
• Jenn Schiffer's make 8-bit art!
• XOXCO's Make Pixel Art