재미있는 CSS 픽셀 아트-HTML 튜토리얼-php.cn

먼저 픽셀화된 작품을 그릴 캔버스가 필요합니다. 그리드를 만드는 방법에는 여러 가지가 있습니다. 한 가지 방법은 각 행의 고정 너비 셀을 포함하는 표준 HTML <table> 요소를 사용하는 것입니다. 예를 들어, 8개의 행과 8개의 열로 구성된 완전 정사각형을 그립니다. 각 셀의 너비를 10px로 설정하면 80X80 테이블이 생성됩니다.

CodePen에서 Geoff Graham(@geoffgraham)이 작성한 Pen CSS Pixels - Table Grid 예제를 참조하세요.

더 큰 캔버스를 원할 경우 셀 크기를 더 크게 설정하세요. 8비트 해상도에서 16비트 해상도로 변경하려면 테이블의 각 행에 있는 셀 수를 두 배로 늘리기만 하면 됩니다.

그리드를 만드는 또 다른 방법은 테이블 대신 두 개의 div를 사용하는 것입니다. 그 중 하나는 캔버스의 컨테이너 역할을 하고, 다른 하나는 캔버스의 요소를 나타내며 필요한 만큼 반복할 수 있습니다.

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

로그인 후 복사

제가 이것을 좋아하는 이유는 우리가 정의한 캔버스 크기에 더 현실적이기 때문입니다. 그리고 table 요소에서 추가 HTML 태그를 작성하지 않고도 이 방법이 더 간단하다고 생각합니다.

보다 명확한 패턴을 만들기 위해 더 많은 픽셀을 원한다면 HTML 태그의 픽셀 수를 두 배로 늘리고 각 픽셀의 크기를 절반으로 줄일 수 있습니다. 마치 웹 페이지에 사용하려는 이미지를 Photoshop에서 만들고 더 높은 해상도를 얻기 위해 크기를 두 배로 늘린 것과 같습니다.

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

로그인 후 복사

그림 그리기 시작

우리는 고무가 도로를 만나는 것처럼 픽셀에 색상을 추가합니다. nth-child 속성을 사용하여 그리드에서 요소를 선택할 수 있습니다.

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

로그인 후 복사

CodePen에서 Max(@MyXoToD)가 제작한 Tranigma의 Pen Canvas Ark를 살펴보세요.

4.svg

CodePen에서 Aloïs De Schepper(@Alo62)의 Pen Pixel me를 확인하세요.

5.3D!

글쎄요, 할 만큼 했다고 생각합니다.