有趣的CSS畫素藝術

畫素藝術作為一種遺失的藝術形式，與超清晰，高解析度圖片相比黯然失色。我在CodePen上瀏覽時偶然發現了一些畫素藝術，它提醒我這種藝術是多麼令人敬畏！

是不是很酷？畫素化圖形中有某種簡單友好的東西，而這些東西是高清晰圖形和插圖中缺失的。

這也是教我們如何用HTML和CSS建立畫素藝術的一個很好的案例。讓我們分析下這個概念，並建立一個可以在其他情況下使用的模式。

建立網格

第一件事，我們需要一張繪製我們畫素化作品的畫布。我們有多種方式來建立網格。一種方式是使用標準的HTML<table>元素，它的每一行都包含固定寬度的單元格。比如我們畫一個八行八列的完美的正方形。如果我們設定每一個單元格10px寬，那麼我們會得到一個80X80的表格。

如果想獲得更大的畫布就給單元格一個更大的尺寸。如果想從8-bit解析度改成16-bit的解析度，只需要將表格的每一行的單元格數量翻倍。

另外一種建立網格的方法是用兩個div代替表格。其中一個作為畫布的容器；另一個代表畫布上的元素，可以根據我們的需要重複多次。

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

我喜歡這一方式的原因是它對於我們定義的畫布尺寸更加真實。而且我覺得這種方式更加簡單，無需編寫來自 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;
}

正如你想象的那樣，這個列表會很長，它取決於網格中的單元格的數量和設計的細節。文章開頭的例子中使用了1920個畫素並且超過300個子類選擇器。天哪！

一個簡單的例子

我決定做一張畫素化的自畫像。這個例子很簡單，因為它的畫素很少並且總共只有四種顏色。

作為Icon的CSS畫素藝術

既然我們已經有了素材，我們可以 使用 transform 屬性縮小圖片把它作為icon使用。

其他的畫素繪製技術

1.box-shadow

你可以用一個元素通過複雜的 box-shadow 屬性繪製畫素藝術。如果你宣告一個 box-shadow 的垂直和水平偏移，而沒有模糊值及陰影半徑，你將得到一個可以隨意移動的元素形狀的彩色複製體。

以下是概念例項。黑色元素是初始形狀，我已經在左下角建立了一個橙色畫素以及在右下角建立了一個紅色畫素。

你可以瘋狂的使用這種方式繪製整個圖案。

2.預處理

變數可以更容易地調整顏色和大小等。

以下是less編寫的例子。

這是Una Kravets編寫的例子， 他更進一步地使用Sass map 建立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並且應用它。下面是最終結果。

記住box-shadow也可以做動畫。

3.canvas

<canvas> 肯定可以繪製矩形。

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

4.svg

雖然 <svg> 有 <rect> ，但是你可以投機取巧使用包含更多畫素的 <polygon> 。

5.3D！

好吧，我想我們已經做得夠多了。

該你了

我們會一直熱衷於你以自己的方式做事，但需要了解現在已經有了很多繪製畫素圖的工具。

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