Lustige CSS-Pixelkunst

Ursprüngliche Adresse: https://css-tricks.com/fun-times-css-pixel-art/#article-header-id-4

Freundliche Erinnerung: Aufgrund von Netzwerkproblemen im Inland kann CodePen möglicherweise nicht geöffnet werden oder ist sehr langsam. Bitte haben Sie etwas Geduld!

Pixelkunst ist eine verlorene Kunstform, die im Vergleich zu ultrascharfen, hochauflösenden Bildern verblasst. Beim Durchstöbern von CodePen bin ich auf Pixelkunst gestoßen, die mich daran erinnert hat, wie großartig diese Kunst sein kann!

Sehen Sie sich das Pen Pikachu-Pixel-CSS von Devi Krisdiansyah (@agilBAKA) auf CodePen an.

Ist es nicht cool? Pixelige Grafiken haben etwas Einfaches und Freundliches, das in hochauflösenden Grafiken und Illustrationen fehlt.

Dies ist auch ein großartiges Beispiel dafür, wie man Pixelkunst mit HTML und CSS erstellt. Lassen Sie uns dieses Konzept analysieren und ein Muster erstellen, das in anderen Situationen verwendet werden kann.

Raster erstellen

Als erstes brauchen wir eine Leinwand, auf der wir unsere pixeligen Kunstwerke zeichnen können. Es gibt viele Möglichkeiten, ein Raster zu erstellen. Eine Möglichkeit besteht darin, das Standard-HTML-Element <table> zu verwenden, das Zellen mit fester Breite für jede Zeile enthält. Wir zeichnen zum Beispiel ein perfektes Quadrat mit acht Zeilen und acht Spalten. Wenn wir jede Zelle auf eine Breite von 10 Pixel einstellen, erhalten wir eine 80 x 80 Pixel große Tabelle.

Sehen Sie sich das Beispiel „Pen CSS Pixels – Table Grid“ von Geoff Graham (@geoffgraham) auf CodePen an.

Vergrößern Sie die Zelle, wenn Sie eine größere Leinwand wünschen. Wenn Sie von der 8-Bit-Auflösung auf die 16-Bit-Auflösung wechseln möchten, müssen Sie lediglich die Anzahl der Zellen in jeder Zeile der Tabelle verdoppeln.

Eine andere Möglichkeit, ein Raster zu erstellen, besteht darin, zwei Divs anstelle von Tabellen zu verwenden. Einer von ihnen fungiert als Container für die Leinwand; der andere stellt die Elemente auf der Leinwand dar und kann beliebig oft wiederholt werden.

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

Der Grund, warum mir das gefällt, ist, dass es der von uns definierten Leinwandgröße realistischer entspricht. Und ich denke, dieser Weg ist einfacher, ohne zusätzliche HTML-Tags aus dem table-Element zu schreiben.

Wenn wir mehr Pixel wünschen, um ein klareres Muster zu erzeugen, können wir die Anzahl der Pixel im HTML-Tag verdoppeln und die Größe jedes Pixels halbieren. Es ist, als ob Sie in Photoshop ein Bild erstellt hätten, das Sie auf einer Webseite verwenden wollten, und dessen Größe verdoppelt hätten, um eine höhere Auflösung zu erhalten.

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

Beginnen Sie mit dem Zeichnen

Wir verleihen den Pixeln Farbe, so wie Gummi auf Straße trifft. Wir können Elemente im Raster mithilfe des Attributs nth-child auswählen.

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

Sehen Sie sich die Pen Canvas Ark von Tranigma von Max (@MyXoToD) auf CodePen an.

4.svg

Obwohl <svg> Es gibt <rect > , aber Sie können opportunistisch sein und <polygon> verwenden, das enthält mehr Pixel

.

Sehen Sie sich den Pen Pixel me von Aloïs De Schepper (@Alo62) auf CodePen an.

5.3D!

Nun, ich denke, wir haben genug getan.

Sehen Sie sich die Pen 3D Pixel Art von cx20 (@cx20) auf CodePen an.

Du bist dran

• Wir sind immer daran interessiert, dass Sie die Dinge auf Ihre eigene Art und Weise tun, wissen aber, dass es viele Tools zum Zeichnen von Pixelkunst gibt.
Ludvig Lindbloms Canvas-Box-Schatten-Pixelkunstgenerator
Jenn Schiffer macht 8-Bit-Kunst!

XOXCO's Make Pixel Art