Weitere Unicode-Muster

Schaffen ist die intensivste Aufregung, die man kennen kann.

—Anni Albers, On Designing

Ich habe kürzlich einen Beitrag geschrieben – der hier auf CSS-Tricks geteilt wurde – in dem ich mir Wege angesehen habe, Unicode-Zeichen zur Erstellung interessanter (und zufälliger) Muster zu verwenden. Seitdem suche ich weiter nach neuen Zeichen, um neue Muster zu erstellen. Ich habe sogar ein Buch über Unicode aus einer örtlichen Bibliothek ausgeliehen.

(Das ist übrigens ein wirklich dickes Buch.)

Es liegt ganz an Ihrer Vorstellungskraft, welche Muster ein Unicode-Zeichen machen kann. Obwohl nicht alle Zeichen gut für Muster geeignet sind, ist der Prozess eine gute Übung für mich.

Und abgesehen von Unicode selbst sind die Methoden zur Erstellung der Muster vielleicht nicht so offensichtlich. Es erfordert normalerweise viel Inspiration und Ausprobieren, um neue zu entwickeln.

Mehr Kacheln

Es gibt tatsächlich viele Möglichkeiten für Kacheln. Hier ist eines meiner Lieblings-Kachelmuster, das sich mit CSS Grid leicht realisieren lässt.

.grid {
  /* using `dense` to fill gaps automatically. */
  grid-auto-flow: dense;
}

.cell {
  /* using `span` to change cell size */
  grid-column-end: span <num>;
  grid-row-end: span <num>;
}

Grid Invaders von Miriam Suzanne ist ein gutes Beispiel für diese Technik.

Jetzt versuche ich, einige Unicode-Zeichen in dieses Raster einzufügen. Und was am wichtigsten ist, den font-size Wert entsprechend der Ausdehnung seiner Zelle zu aktualisieren.

Ich habe nur mit Chrome auf Mac getestet. Einige der Beispiele sehen auf anderen Browsern/Plattformen möglicherweise furchtbar aus.

.cell {
  /* ... */
  --n: <random-span>;
  grid-column-end: span var(--n);
  grid-row-end: span var(--n);
}

.cell:after {
  /* ... */
  font-size: calc(var(--n) * 2vmin);
}

Es ist ein bisschen wie der Tag-Cloud-Effekt, aber mit CSS. Auf diese Weise lassen sich viele Muster erstellen.

Die span von Spalten und Zeilen müssen nicht immer denselben Wert haben. Wir können kleine Änderungen vornehmen, indem wir die Anzahl der Zeilen ändern, die jede Zelle überspannt.

.cell {
  /* only change the row span */
  grid-row-end: span <num>;
}

Da die Eigenschaft font-size sowohl vertikal als auch horizontal skaliert, wird stattdessen scaleY() in der Eigenschaft transform verwendet.

:after {
  /* ... */
  transform: scaleY(calc(var(--span) * 1.4));
}

Und hier ist noch eines, das durch Drehen des inneren Containers des Rasters um einen gewissen Grad erstellt wurde.

Die Dreiecke können auch mit clip-path gezeichnet werden und sind reaktionsfähiger, aber es ist schön, etwas auf andere Weise zu tun.

Weitere Änderungen am Layout

.column-odd {
  transform: skewY(40deg);
}

.column-even {
  transform: skewY(-40deg);
}

Wenden Sie nun diese Transformationen für jede Spalte an.

Komposition

Viele Unicode-Paare haben eine ähnliche Form mit unterschiedlichen Winkeln. Zum Beispiel Klammern, eckige Klammern und Pfeile, die in verschiedene Richtungen zeigen. Wir können dieses Konzept nutzen, um die Formen zu kombinieren und wiederholbare Muster zu erzeugen.

Dieses Muster verwendet kleiner-als- und größer-als-Zeichen als Basis

:nth-child(odd):after {
  content: '<';
}

:nth-child(even):after {
  content: '>';
}

Hier sind Klammern

:nth-child(odd):after {
  content: '(';
}

:nth-child(even):after {
  content: ')';
}

Das sind Zeichen, die wir täglich verwenden. Sie verleihen uns jedoch einen frischen Look und ein neues Gefühl, wenn sie neu angeordnet werden.

Es gibt ein weiteres Zeichenpaar, ᚛ und ᚜. Wenn man sie im Raster platziert und auf einen angemessenen Wert skaliert, verbinden sie sich zu einem nahtlosen Muster.

Das ist wie Weben mit Zeichen! Wir können es sogar noch steigern, indem wir Dinge drehen.

Ringe

Letzte Woche habe ich an einer CodePen Challenge teilgenommen, bei der die Gruppe aufgefordert wurde, ein Design aus sub- und sup-Elementen zu erstellen. Als ich damit experimentierte, bemerkte ich, dass die beiden Tags beim Verschachteln automatisch kleiner wurden.

Also versuchte ich, sie um einen Kreis zu legen.

.first-level {
  /* Slice the circle into many segments. */
  transform: rotate(
    calc(360deg / var(--slice) * var(--n))
  );
}

Plötzlich erkannte ich, dass diese Methode auch zur Erstellung von Hintergrundmustern verwendet werden kann. Die Ergebnisse sind ziemlich gut.

sub:after, sup:after {
  content: '\003e';
}

Das Interessante ist, dass die Änderung eines einzigen Zeichens zu sehr unterschiedlichen Ergebnissen führen kann.

Zusammenfassung

Das ist alles für den Moment! Die in diesem Artikel verwendeten Farbpaletten stammen von Color Hunt und Coolors.co.

Die Beispiele werden mit css-doodle generiert, mit Ausnahme der Ring-Beispiele im letzten Abschnitt. Alles hier kann in dieser CodePen-Sammlung gefunden werden.

Ich hoffe, sie gefallen Ihnen und danke fürs Lesen!