Pixel-Kunst ist eine jener verlorenen Kunstformen, die durch superscharfe, hohe Auflösungen Bilder Schatten gestellt wurden. Ich stolperte auf einige Pixel-Art, während sie um CodePen Surfen und es erinnerte mich, wie toll es ist.
Wie cool ist das. Es gibt etwas über verpixelten Grafiken, die eine Schicht aus Einfachheit und Freundlichkeit fügt hinzu, die in High-Definition-Bilder und Grafiken verloren gehen können.
Es ist auch ein gutes Beispiel dafür, wie wir Pixel-Art erstellen können, HTML und CSS. Lassen Sie sich dieses Konzept brechen und erstellen Sie ein Muster, das wir in anderen Fällen verwenden können.
Erstellen Sie ein Gitter
Das wichtigste zuerst. Wir brauchen eine Leinwand unser pixelig Meisterwerk zu malen. Das ist wirklich ein Gitter, das wir ein paar verschiedene Möglichkeiten zu schaffen.
Eine Möglichkeit wäre ein Standard-HTML
dass enthält ein Bündel von festen Breiten Zellen in jeder Reihe. Zum Beispiel lassen Sie uns sagen, dass wir eine perfekt quadratischen Tisch zeichnen, die acht Spalten breit und acht Reihen tief. Wenn wir jeden Zelle 10 Pixel Platz machen, dann haben wir eine Tabelle, die 80px breit und hoch ist:
Möchten Sie eine größere Leinwand? Geben Sie die Zellen eine größere Dimension. Möchte von 8-Bit auf 16-Bit-Auflösung gehen? Die doppelte Anzahl von Zellen in jeder Tabellenzeile.
Der andere Weg, um ein Raster zu gründen ist, den Tisch zu Graben und ersetzen sie durch zwei divs: eine, die für unsere Leinwand als Behälter dient und eine andere, die so oft wiederholt werden können, wie wir jedes Pixel in der Leinwand darstellen wollen.
Der Trick hier ist, genau zu wissen, wie viele Pixel zu erstellen. Dafür können wir mehrere die Anzahl der Pixel in der Breite durch die Anzahl der Pixel hoch. Zum Beispiel, wenn wir die gleichen 80px quadratischen Raster wie die Tabelle, Methode und wollen ein Raster, das 8 Pixel breit ist, um 8 Pixel hoch erstellen, dann können wir diese für eine Gesamtsumme von 64 Pixeln multiplizieren.
starten Sie Malerei
Dies ist, wo der Gummi die Straße in dem Sinne erfüllt, die wir Farbe in unsere Pixel hinzufügen. Wir können das n-te-Kind-Attribut verwenden, um bestimmte Pixel im Raster auswählen.
Wie Sie sich vorstellen können, wird diese Liste bekommen sehr lange sehr schnell in Abhängigkeit von der Anzahl der Zellen in dem Gitter und dem, wie viele Details der Konstruktion erfordert. Das Öffnungs Beispiel in diesem Beitrag verwendet 1,920 Gesamtanzahl Pixel in dem Raster, und mehr als 300 verschiedene Kind-Selektoren. Puh!
Ein einfaches Beispiel
CSS-Pixel-Kunst als Symbol
Nun, da wir etwas haben, mit zu arbeiten, können wir die Transformation Eigenschaft verwenden, um unsere Kunstwerke verringern und verwenden Sie es wie ein Symbol:
Andere Pixel Zeichentechniken
Box Schatten
Hier ist das Konzept. Das schwarze „Pixel“ ist das Original, und ich habe ein orangefarbenes Pixel zu erzeugen links unten und ein rotes Pixel nach rechts unten.
Sie könnten hog-wild, dass gehen und ganze Zeichnungen tun.
Preprocessing
Variablen könnte helfen, es leichter zu justieren Farben und Dimensionierung und so zu machen. Hier ist ein Beispiel in Abzüglich:
Hier ist ein Beispiel von Una Kravets, dass es einen Schritt weiter bei der Schaffung der Box Schatten mit einem Sass Karte nimmt, was verflixt clever ist:
Es gibt ein paar mehr Funktionen gibt, dass in die box-shadow zu konvertieren und sie anwenden. Hier ist das Endergebnis:
Denken Sie daran, box-shadow kann auch animiert werden!
Das
Ein natürlich
Ok, ich denke, dass wir hier genug getan haben.
Du bist dran!
Wir sind immer ein Fan von Ihnen Dinge, die Ihre eigene Art und Weise zu tun, aber wissen, gibt es einige Tools bereits gibt für mit Pixel zeichnen:
Teile das:
Pixel sind mein Favorit!
Für einen universellen Ansatz zu skalierbaren Pixeln, die mit einem einfachen verwendet werden können, Tag oder direkt in der Seite, versucht Pixels.svg. Drop in ein Bild, erhalten die Pixel zurück in svg.
Es wird nicht die Größe der Bilddatei noch kleiner, aber es ermöglicht es ohne Treue Verlust zu skalieren und ist so klein wie möglich einzigartige SVG-Pfaddaten.