CSS 像素画的趣味时光

像素画是一种已经过时的艺术形式，它被超清晰、高分辨率的图像所掩盖。我在 CodePen 上浏览时偶然发现了一些像素画，它让我想起了像素画的魅力。

查看笔 皮卡丘像素 CSS 由 Devi Krisdiansyah (@agilBAKA) 在 CodePen 上创建。

太酷了！像素化图形有一种独特的魅力，它添加了一层在高清图像和插图中会丢失的简单性和友好性。

这也是一个很好的例子，说明我们可以使用 HTML 和 CSS 创建像素画。让我们深入探讨这个概念，并创建一个可以在其他情况下使用的图案。

创建网格

首先。我们需要一块画布来绘制我们像素化的杰作。这实际上是一个网格，我们可以用几种不同的方法创建。

一种方法是使用标准的 HTML <table>，它包含每行中许多固定宽度的单元格。例如，假设我们绘制一个完美的正方形表格，宽 8 列，深 8 行。如果我们使每个单元格为 10 像素的正方形，那么我们就得到一个宽高均为 80 像素的表格。

查看笔 CSS 像素 - 表格网格示例 由 Geoff Graham (@geoffgraham) 在 CodePen 上创建。

想要更大的画布？为单元格设置更大的尺寸。想要将分辨率翻倍？将每个表格行的单元格数量翻倍。

另一种设置网格的方法是放弃表格，用两个 div 替换它：一个充当我们画布的容器，另一个可以根据需要重复以表示画布中的每个像素。

<div class="canvas">
  <div class="pixel"></div>
  <!-- Repeat as many times as needed -->
</div><!-- end .canvas -->

这里的诀窍是知道要创建多少像素。为此，我们可以将像素宽度乘以像素高度。例如，如果我们创建与表格方法相同的 80px 正方形网格，并希望网格宽 8 像素，高 8 像素，那么我们可以将它们相乘，得到总共 64 个像素。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 64 total pixels in our HTML */
  width: 10px;
  height: 10px;
  float: left;
}

查看笔 CSS 像素 - Div 示例 由 Geoff Graham (@geoffgraham) 在 CodePen 上创建。

我喜欢这种方法，因为它更符合我们定义的画布尺寸。我还发现它更容易，无需处理使用 table 带来的额外 HTML 标记。

如果我们想要更多像素以创建更详细的图案，那么我们可以将 HTML 标记中的像素数量增加四倍，并将像素大小减半。这有点像在 Photoshop 中制作一张尺寸是页面上计划使用尺寸的两倍的图像，以创建更高的分辨率。

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 256 total pixels in our HTML */
  width: 5px;
  height: 5px;
  float: left;
}

开始绘画

我们给像素上色，让它们活起来。我们可以使用 nth-child 属性来选择网格中的特定像素。

/* The third cell in our grid */
.pixel:nth-child(3) {
  background: orange;
}

正如您所想象，根据网格中的单元格数量以及设计所需的细节程度，这个列表会很快变得很长。这篇文章中的开篇示例在网格中使用了 1,920 个像素，并使用了超过 300 个不同的子选择器。哇！

一个简单的例子

我决定制作一个像素化的自画像。它非常简单，因为我使用了很少的像素，并且只有四种颜色。

查看笔 CSS 像素 - 自画像 由 Geoff Graham (@geoffgraham) 在 CodePen 上创建。

CSS 像素画作为图标

现在我们有了可以使用的素材，我们可以使用 transform 属性将我们的作品缩小，并像图标一样使用它。

查看笔 CSS 像素 - 自画像 - 图标 由 Geoff Graham (@geoffgraham) 在 CodePen 上创建。

其他像素绘制技巧

box-shadow

您可以使用一个复杂的大型 box-shadow 在单个元素内绘制像素画！如果您为 box-shadow 声明了垂直和水平偏移量，但没有声明模糊或扩散半径，那么您将获得一个移动的元素形状的干净的彩色副本。

这是这个概念。黑色“像素”是原始的，我已经在左下角创建了一个橙色像素，在右下角创建了一个红色像素。

查看笔 像素画基础 由 Chris Coyier (@chriscoyier) 在 CodePen 上创建。

您可以使用它来进行疯狂的创作，并绘制完整的图画。

查看笔 像素地狱男 由 servin (@servinlp) 在 CodePen 上创建。

预处理

变量可以帮助我们更轻松地调整颜色、大小等。以下是一个 Less 示例。

查看笔 像素艺术潮人吃豆人 由 Mario Sanz (@msanz) 在 CodePen 上创建。

以下是由 Una Kravets 给出的示例，它更进一步，使用 Sass 地图创建 box-shadow，这非常聪明。

// 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)
  )
);

其中还有几个函数可以将它转换为 box-shadow 并应用它。以下是最终结果。

查看笔 Sass 生成的 Box Shadow 像素画！ 由 Una Kravets (@una) 在 CodePen 上创建。

请记住，box-shadow 也可以进行动画处理！

查看笔 小智和小火龙 box-shadow 像素画 由 Andrew (@AstroDroid) 在 CodePen 上创建。

画布

<canvas> API 当然可以绘制矩形！

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);

查看笔 来自特兰尼格玛的画布方舟 由 Max (@MyXoToD) 在 CodePen 上创建。

SVG

当然，<svg> 有 <rect>。但你甚至可以稍微作弊，制作结合多个像素的 <polygon>。

查看 CodePen 上 Aloïs De Schepper（@Alo62）的笔：Pixel me。

3D!

好的，我认为我们已经在这里做了足够多的事情。

查看 CodePen 上 cx20 的笔：3D Pixel Art。

轮到你了！

我们一直都喜欢你用自己的方式做事，但要知道，市面上已经有一些工具可以用来绘制像素图。

• Ludvig Lindblom 的 Canvas box-shadow 像素艺术生成器
• Jenn Schiffer 的 制作 8 位艺术！
• XOXCO 的 制作像素艺术
• Javier Valencia 的 像素艺术到 CSS 生成器

你是否创建了愿意分享的 CSS 像素艺术？我在 CodePen 创建了一个合集，但请在下面的评论中发布你的示例，以便我们一起欣赏。