使用 CSS 创建像素艺术

我一直很喜欢欣赏和创作像素艺术。在在线像素创作工具出现之前，我常常会花上几个小时在 Photoshop 里用铅笔工具创作自己的像素艺术作品。本文将向你展示如何使用 CSS（以及少量 HTML）编写代码来创作你自己的像素艺术作品。

的力量box-shadow

虽然通过创建一堆 s 并更改其背景颜色来创建像素画是完全可行的，但如果要在多个地方重复使用像素，则需要跟踪和复制<div>大量的s 。我更喜欢用单个 s 来创建像素画，这要归功于属性。<div><div>box-shadow

box-shadow通常用于在元素后面创建阴影效果，如下例所示。

这对我们创作直边像素艺术有什么帮助呢？通过从box-shadow定义中移除模糊和扩散参数，我们可以拉直阴影的两侧。

接下来，我们要移动阴影，使其位于块的旁边，而不是块的后面。我们可以按照以下规则调整 X 和 Y 偏移参数来实现。

X 偏移：

• 正值向右移动
• 负值向左移动

Y 偏移：

• 正值向下移动
• 负值上升

阴影的尺寸会从应用它们的元素继承。要将阴影移动到块的右侧，我们需要将 X 偏移量设置为与块的宽度相同：20px。如果我们将 Y 偏移量更改为0，结果看起来就像两个块并排放置一样。

它开始看起来像像素艺术了！但这只给了我们两个“像素”，而我们需要的远不止这些。值得庆幸的是，该box-shadow属性并不仅限于一种效果。通过用逗号分隔效果，我们可以创建多个像素效果的阴影。

现在我们知道了如何使用box-shadow，是时候开始制作真正的像素艺术作品了。

创建像素猫

我们将创建一个像素版的 Pusheen。如果你是像素艺术创作新手，我建议你先参考一些已有的艺术作品，这样你就可以参考像素的放置位置。我将重新制作这个像素版的 Pusheen。

它由414个像素（23列 x 18行）组成。为了方便识别单个像素，我使用Photoshop在参考图上叠加了一个网格。

虽然您可以从任何地方开始绘制像素，但我将从最左上角开始，这样我就不必担心box-shadow效果中的任何负偏移。

我还将使用 SASS 代替原生 CSS，以避免box-shadow手动编写 414 声明。通过使用自定义 SASS 函数和列表，我们可以自动计算偏移位置，并使代码更加 DRY。

首先，我要对我们的#cat块进行一些修改。我不会将 box-shadow 应用于box-shadow块本身，而是将其应用于一个相对于块绝对定位的伪元素。为什么？因为它box-shadow不占用空间，也就是说，如果我将另一个元素放在猫块旁边，它会位于阴影之上。如果我们将猫块的大小设置为像素艺术的最终大小，就可以避免这个问题，但我们需要伪元素单独定义像素的宽度/高度（记住，阴影的大小是从应用 box-shadow 的元素继承而来的）。这些修改如下所示：

#cat {
  position: relative;
  width: calc(23 * #{$size}); // Pixel size * # of columns
  height: calc(18 * #{$size}); // Pixel size * # of rows
  margin: 1rem;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
    // box-shadow will be applied here
  }
}

接下来，让我们设置一些变量。

// The width/height of each of our "pixels".
$size: 20px;

// Colors
$t: transparent;
$black: #000;
$gray: #cdc9cf;
$dkgray: #a09da1;
$pink: #ffa6ed;

现在我们要创建一个列表来追踪每个像素应该是什么颜色。从左边开始，我们先为第一行创建一个列表。

$first: ($t, $t, $t, $black, $t, $t, $t, $t, $black);

我们可以为后续的每一行（$second、$third等）创建新变量，但更好的方法是创建一个嵌套列表，如下所示：

$cat: (
  ($t, $t, $t, $black, $t, $t, $t, $t, $black),// 1st Row
  ($t, $t, $black, $gray, $black, $t, $t, $t, $t, $black, $gray, $black)// 2nd Row
  // Additional rows
);

嵌套列表方法的优点在于，它能提供生成box-shadow每个单元格效果所需的所有信息：用于计算偏移量的 X/Y 位置以及阴影的颜色。我们将使用自定义的“pixelize”函数来访问这些信息。

编写 SASS 函数来绘制像素

我们的“pixelize”函数将承担起将颜色列表转换为可用定义的重任box-shadow。下面我将逐行解释该函数的作用。

@function pixelize($colors, $size) {
  $result: '';
  $numRows: length($colors);

  @for $rowIndex from 1 through $numRows {
    $y: ($rowIndex - 1);
    $row: nth($colors, $rowIndex);
    $numCols: length($row);

    @for $cellIndex from 1 through $numCols {
      $x: ($cellIndex - 1);
      $color: nth($row, $cellIndex);

      $sep: ', ';
      @if $x == 0 and $y == 0 {
        $sep: '';
      }

      $result: $result + '#{$sep}#{$x * $size} #{$y * $size} #{$color}'
    }
  }

  $result: unquote($result);
  @return $result;
}

• 第 1 行：该函数接受两个参数：列表$colors和$size像素应该
• 第 2 行：将$result变量初始化为字符串。这是函数将修改并返回的变量。
• 第 3 行：使用内置length函数返回列表中的行数
• 第 5 行：开始一个循环，迭代 X 次，其中 X 是列表中的行数。$rowIndex每次循环都会加 1。
• 第 6 行：计算该行所有单元格的 Y 轴偏移量。SASS 列表的索引为 1（而不是索引为 0），因此我们从当前索引中减 1，这样第一行的 Y 轴偏移量为 0，第二行的 Y 轴偏移量为 1，以此类推。
• 第 7 行和第 8 行：返回当前列表项的值（行的颜色列表）并计算其长度以确定行中的列数
• 第 10 行：启动循环来遍历行中的每一列
• 第 11 和 12 行：计算该单元格的 X 偏移量并返回相应的颜色
• 第 14-17 行：设置效果的分隔符box-shadow，但删除第一个单元格的分隔符以确保有效的属性值。
• 第 19 行：将$result值更新为现有值加上新单元格：
  • 分隔符
  • X 位置 * $size= X 偏移
  • Y 位置 * $size= Y 偏移
  • 颜色
• 第 23 行和第 24 行：$result是一个字符串，因此我们使用unquote函数删除包含的引号。最后返回结果。

最终结果

把所有这些放在一起，这就是我们最终的 Pusheen 像素！

太棒了！只需稍加重构，使用 CSS 变量和少量 JavaScript，我们甚至可以允许用户为他们的猫咪选择自己的颜色。

希望这篇文章能启发你创作自己的像素艺术作品。即使没有，也希望你学会了如何box-shadow在项目中运用该属性创建一些巧妙的效果。如果你想了解更多像素艺术作品，包括动画示例，请查看 Geoff Graham 在 CSS-Tricks 上发布的“ CSS 像素艺术趣味时光”。