html格子像素画,有趣的CSS像素

如今很多艺术被超清，高像素图片掩盖了光芒，像素艺术就是其中之一。我在逛CodePen的时候被一些像素作品惊呆了，它们又一次告诉了我像素艺术多么的了不起。

很酷不是吗？像素图案是在高清和高分辨率的图片或插画上加一层简单柔和的蒙层合成的。

这也是个教我们用HTML和CSS来创做像素艺术的好例子。让我们打破这个概念，建立一个可以在其他地方可用的模式。

创建栅格

首先，我们需要一个画布来绘制这个杰作。我们要创建一个栅格，可以通过很多方式。

一种方法是使用标准的HTML

想让画布更大？让小格子尺寸更大些。想从8-bit变成16-bit？让table里每行的小格子宽高加倍。

另一种创建栅格的方法是不用table，换成两种div组成：一个充当画布容器，另一个将被循环创建多次来做画布的像素块。

这种方法需要明确知道需要创建多少像素块。为此，可以通过将每行的像素数和每列像素数相乘得到。举个例子，如过我们像上面一样想创建80px的正方形，并且希望每行有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;

}

我喜欢这种方法是因为它让我们定义的画布尺寸更准确。而且它不需要使用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个不同的子选择器！

一个简单的例子

我决定做个像素自画像。我打算用比较少的像素块和仅四种颜色做个简单的。

CSS像素和icon

现在我们已经有了一些作品，可以使用transform属性来缩放我们的作品，并把它当icon使用：

其他像素画技巧

box-shadow

使用单一元素配合非常复杂的box-shadow也能画出像素画！如果为box-shadow定义了水平和垂直偏移量而没有模糊距离或扩散角度，将在元素的偏移位置上得到一个纯色填充的图形副本。

这里有例子。黑色像素是原始的元素，然后我在左下角创建了一个橘色像素，在右下角创建了一个红色像素。

你可以用这种方法画一只野兽。

预处理

使用变量对调整颜色和大小等很有帮助。下面是一个用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也能制作动画！

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

SVG

中有。但你也可以取巧地使用组合成多个像素。

3D!

好吧我们已经完成了。

到你了！

我们也鼓励你用自己的方式做这些，不过这里已经有一些帮助你使用像素绘图的工具了：

你有完成的艺术作品要分享吗？我在CodePen创建了合集，请在评论中附上你们的作品，我们会把出色的作品都会展示出来。