Lustige Zeiten mit CSS Pixel Art

Pixel Art ist eine dieser verlorenen Kunstformen, die von gestochen scharfen Bildern mit hoher Auflösung überschattet wurde. Ich bin beim Surfen auf CodePen auf Pixel Art gestoßen und es hat mich daran erinnert, wie großartig sie ist.

Siehe den Pen Pikachu Pixel CSS von Devi Krisdiansyah (@agilBAKA) auf CodePen.

Wie cool ist das denn?! Pixelgrafiken haben etwas, das ihnen eine Schicht von Einfachheit und Freundlichkeit verleiht, die bei hochauflösenden Bildern und Illustrationen verloren gehen kann.

Es ist auch ein großartiges Beispiel dafür, wie wir Pixel Art mit HTML und CSS erstellen können. Lassen Sie uns dieses Konzept aufschlüsseln und ein Muster erstellen, das wir auch in anderen Fällen verwenden können.

Ein Gitter erstellen

Zuerst einmal. Wir brauchen eine Leinwand, um unser pixeliges Meisterwerk zu malen. Dies ist eigentlich ein Gitter, das wir auf verschiedene Arten erstellen können.

Eine Möglichkeit wäre eine Standard- HTML-<table>, die eine Reihe von Zellen mit fester Breite in jeder Zeile enthält. Nehmen wir zum Beispiel an, wir zeichnen eine perfekt quadratische Tabelle mit acht Spalten und acht Zeilen. Wenn wir jede Zelle 10 Pixel quadratisch machen, haben wir eine Tabelle, die 80 Pixel breit und hoch ist.

Siehe den Pen CSS Pixels – Tabellen-Gitter-Beispiel von Geoff Graham (@geoffgraham) auf CodePen.

Möchten Sie eine größere Leinwand? Geben Sie den Zellen eine größere Abmessung. Möchten Sie die Auflösung verdoppeln? Verdoppeln Sie die Anzahl der Zellen in jeder Tabellenzeile.

Die andere Möglichkeit, ein Gitter einzurichten, besteht darin, die Tabelle zu verwerfen und sie durch zwei divs zu ersetzen: eines, das als Container für unsere Leinwand dient, und ein weiteres, das beliebig oft wiederholt werden kann, um jedes Pixel auf der Leinwand darzustellen.

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

Der Trick hierbei ist, genau zu wissen, wie viele Pixel erstellt werden müssen. Dazu können wir die Anzahl der Pixel in der Breite mit der Anzahl der Pixel in der Höhe multiplizieren. Wenn wir zum Beispiel das gleiche 80px quadratische Gitter wie bei der Tabellenmethode erstellen und ein Gitter wünschen, das 8 Pixel breit und 8 Pixel hoch ist, können wir diese multiplizieren, um eine Gesamtzahl von 64 Pixeln zu erhalten.

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 64 total pixels in our HTML */
  width: 10px;
  height: 10px;
  float: left;
}

Siehe den Pen CSS Pixels – Div-Beispiel von Geoff Graham (@geoffgraham) auf CodePen.

Was mir an dieser Methode gefällt, ist, dass sie den von uns definierten Leinwandabmessungen näher kommt. Ich finde es auch einfacher, nicht mit dem zusätzlichen HTML-Markup umgehen zu müssen, das mit table einhergeht.

Wenn wir mehr Pixel für ein detaillierteres Muster wünschen, können wir die Anzahl der Pixel in unserem HTML-Markup vervierfachen und die Größe unserer Pixel halbieren. Das ist so ähnlich, als würde man ein Bild in Photoshop erstellen, das doppelt so groß ist wie die Abmessungen, die man auf der Seite verwenden möchte, um eine höhere Auflösung zu erzielen.

.canvas {
  /* Perfectly square */
  width: 80px;
  height: 80px;
}

.pixel {
  /* We'll need 256 total pixels in our HTML */
  width: 5px;
  height: 5px;
  float: left;
}

Mit dem Malen beginnen

Hier wird es ernst, indem wir unseren Pixeln Farbe hinzufügen. Wir können das nth-child-Attribut verwenden, um bestimmte Pixel im Gitter auszuwählen.

/* The third cell in our grid */
.pixel:nth-child(3) {
  background: orange;
}

Wie Sie sich vorstellen können, wird diese Liste je nach Anzahl der Zellen im Gitter und dem erforderlichen Detailgrad des Designs sehr schnell sehr lang. Das einleitende Beispiel in diesem Beitrag verwendet insgesamt 1.920 Pixel im Gitter und mehr als 300 verschiedene Kindselektoren. Puh!

Ein einfaches Beispiel

Ich habe beschlossen, ein pixeliges Selbstporträt zu machen. Es ist ziemlich einfach, da ich mich für sehr wenige Pixel und nur vier Farben entschieden habe.

Siehe den Pen CSS Pixels – Selbstporträt von Geoff Graham (@geoffgraham) auf CodePen.

CSS Pixel Art als Symbol

Nun, da wir etwas zum Arbeiten haben, können wir die transform-Eigenschaft verwenden, um unsere Grafik zu verkleinern und sie wie ein Symbol zu verwenden.

Siehe den Pen CSS Pixels – Selbstporträt – Symbol von Geoff Graham (@geoffgraham) auf CodePen.

Andere Pixel-Zeichentechniken

box-shadow

Sie können Pixel Art innerhalb eines einzelnen Elements zeichnen, indem Sie einen großen komplizierten box-shadow verwenden! Wenn Sie einen vertikalen und horizontalen Versatz für den Box-Schatten deklarieren, aber keinen Unschärfe- oder Streuradius, erhalten Sie eine saubere farbige Kopie der Form des Elements, die Sie verschieben können.

Hier ist das Konzept. Der schwarze „Pixel“ ist das Original, und ich habe einen orangefarbenen Pixel unten links und einen roten Pixel unten rechts erstellt.

Siehe den Pen Grundlagen der Pixel Art von Chris Coyier (@chriscoyier) auf CodePen.

Sie könnten damit verrückt werden und ganze Zeichnungen machen.

Siehe den Pen Pixel Hellboy von servin (@servinlp) auf CodePen.

Vorverarbeitung

Variablen könnten es erleichtern, Farben und Größen usw. anzupassen. Hier ist ein Beispiel in Less.

Siehe den Pen Pixel-Art-Hipster-Pacwoman von Mario Sanz (@msanz) auf CodePen.

Hier ist ein Beispiel von Una Kravets, das noch einen Schritt weiter geht, indem es den Box-Schatten mit einer Sass-Map erstellt, was ziemlich raffiniert ist.

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

Es gibt noch ein paar Funktionen, um das in den Box-Schatten umzuwandeln und anzuwenden. Hier ist das Endergebnis:

Siehe den Pen Sass-generierte Box-Shadow-Pixel-Art! von Una Kravets (@una) auf CodePen.

Denken Sie daran, dass Box-Shadow auch animiert werden kann!

Siehe den Pen Ash und Pikachu Box-Shadow Pixel Art von Andrew (@AstroDroid) auf CodePen.

Leinwand

Die <canvas>-APIs können sicherlich Rechtecke zeichnen!

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

Siehe den Pen Canvas-Arche aus Terranigma von Max (@MyXoToD) auf CodePen.

SVG

Und natürlich hat <svg> <rect>. Aber Sie könnten sogar ein wenig schummeln und <polygon>s erstellen, die mehrere Pixel kombinieren.

Siehe den Pen Pixel mich von Aloïs De Schepper (@Alo62) auf CodePen.

3D!

Okay, ich glaube, wir haben hier genug getan.

Siehe den Pen 3D Pixel Art von cx20 (@cx20) auf CodePen.

Jetzt sind Sie dran!

Wir sind immer dafür, dass Sie Dinge auf Ihre eigene Weise tun, aber wissen Sie, dass es bereits einige Werkzeuge zum Zeichnen mit Pixeln gibt.

• Ludvig Lindbloms Canvas-Box-Shadow-Pixel-Art-Generator
• Jenn Schiffers Mach 8-Bit-Kunst!
• XOXCOs Pixel-Kunst machen
• Javier Valencias Pixel-Art-zu-CSS-Generator

Haben Sie CSS-Pixel-Art erstellt, die Sie teilen möchten? Ich habe eine Sammlung in CodePen erstellt, aber bitte posten Sie Ihre Beispiele unten in den Kommentaren, damit wir uns an der Großartigkeit erfreuen können.