Weitere Unicode-Muster

0
39

Schaffen ist die Intensive Aufregung, man kann kommen, zu wissen.

—Anni Albers, On Entwerfen

Ich schrieb vor kurzem einen post, der geteilt wurde hier auf CSS-Tricks — wobei ich sah Sie an Möglichkeiten, um Unicode-Zeichen verwenden, um interessante (und zufälligen) mustern. Seitdem bin ich weiter auf die Suche nach neuen Figuren, um neue Muster. Ich selbst lieh mir ein Buch über Unicode aus einer lokalen Bibliothek.

(Das ist ein wirklich dickes Buch, übrigens.)

Es ist alles bis zu Ihrer Fantasie zu sehen, die mögliche Muster ein Unicode-Zeichen machen kann. Obwohl nicht alle Zeichen sind gut als Muster, der Prozess ist eine gute übung für mich.

Und, abgesehen von Unicode selbst, die Methoden zum erstellen der Muster, die möglicherweise nicht so offensichtlich sein. Es dauert in der Regel eine Menge inspiration und Versuch und Irrtum zu kommen mit neuen.

Mehr Fliesen

Es gibt tatsächlich viele Wege das zu tun-Kacheln. Hier ist einer meiner Lieblings-Kachel-Muster, die einfach erreicht werden kann mithilfe von CSS-grid:

.grid {
/* mit `dichten`, um Lücken automatisch. */
grid-auto-flow: dicht;
}

.Zelle {
/* mit `span` zu ändern Größe der Zelle */
raster-Spalte-Ende: span <num>;
raster-Zeile-Ende: span <num>;
}

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

Nun, was ich versuche zu tun ist, legen Sie einige Unicode-Zeichen in dieses raster. Und am wichtigsten ist, aktualisieren Sie die font-Größe auf einen Wert entsprechend der Spannweite seiner Zelle.

Muster mit Zeichen 2f3c durch 2f9f

Ich habe nur getestet mit Chrome auf dem Mac. Einige Beispiele mögen schrecklich Aussehen in anderen Browsern/Plattformen.

.Zelle {
/* … */
–n: <random span>;
raster-Spalte-Ende: span var(–n);
raster-Zeile-Ende: span var(–n);
}

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

Es ist ein bisschen wie die Tag-Cloud-Effekt, aber mit CSS. Viele Muster können auf diese Weise gemacht.

Muster mit Zeichen 2686 durch 2689
Muster mit Zeichen 21b0, 21b1, 21b2 und 21b4

Der span der Spalten und Zeilen nicht immer auf den gleichen Wert. Können wir machen kleine änderungen, indem Sie, wie viele Zeilen jede Zelle umfasst:

.Zelle {
/* ändern Sie nur die Zeile span */
raster-Zeile-Ende: span <num>;
}

Da die font-size-Eigenschaft Skalen mit bis/nach unten, in beide Richtungen (vertikal und horizontal), die scaleY() in die transform-Eigenschaft verwendet werden, statt.

Muster mit Zeichen 25c6 durch 25c8

:after {
/* … */
transform: scaleY(calc(var(–span) * 1.4));
}

Und hier ist noch eins, gemacht durch drehen des inneren Behälters von dem Gitter zu einem gewissen Grad.

Die Dreiecke, die auch gezeichnet werden kann, mit clip-Pfad und wird stärker, aber es ist schön, etwas zu tun, in einer anderen Weise.

Weitere änderungen am layout:

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

.Spalte-sogar {
transform: skewY(-40deg);
}

Nun Folgen diese Veränderungen für jede Spalte.

Muster mit Zeichen 1690 durch 1694

Zusammensetzung

Viele Unicode-Paare teilen eine Art von Form mit verschiedenen Winkeln. Zum Beispiel, Runde Klammern, eckige Klammern, und die Pfeile mit verschiedenen, in unterschiedliche Richtungen gehen. Wir können mit diesem Konzept kombinieren Sie die Formen und erzeugen wiederholbare Muster.

Dieses Muster benutzt einen kleiner-als und größer-als-Zeichen für die base:

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

:nth-child(even):after {
Inhalt: ‘>’;
}

Hier gehen wir mit Runden Klammern:

Ein gewelltes Muster mit ( und )

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

:nth-child(even):after {
Inhalt: ‘)’;
}

Dies sind die Zeichen, die wir täglich verwenden. Jedoch geben Sie uns einen frischen Blick und das Gefühl, wenn Sie angeordnet sind, in einer neuen Weise.

Es gibt noch ein paar Charaktere, ᚛, und ᚜. Indem Sie in das raster und Skalierung auf einen richtigen Wert verbinden Sie zusammen in einem nahtlosen Muster:

Es ist wie das Weben mit Zeichen! Wir können sogar nehmen Sie es herauf eine Kerbe durch drehen Dinge:

Muster mit 169b und 169c

Ringe

Letzte Woche kam ich auf eine CodePen Herausforderung, sich gegen die Gruppe zu machen ein design aus der sub-und sup-Elemente. Als ich experimentierte mit Ihnen, habe ich gemerkt, dass die zwei tags skaliert sich automatisch, wenn verschachtelt.

Also, ich versuchte, um Sie herum einen Kreis:

.erste-Ebene {
/* Schneiden Sie den Kreis in viele Segmente. */
transform: rotate(
calc(360deg / var(–Scheibe) * var(–n))
);
}

Plötzlich erkannte ich, diese Methode kann verwendet werden, zu erzeugen, hintergrund-Muster, auch. Die Ergebnisse sind ziemlich nett.

Muster mit 03e

sub:nach, sup:after {
content: ‘03e’;
}

Das interessante an der Sache ist, dass das ändern eines einzelnen Zeichens kann am Ende sehr unterschiedliche Ergebnisse.

Die Kombination 02e und 03e zusammen ein Muster bilden,
Die Kombination 25c9 und 2234 erzeugt einen anderen Effekt in die gleiche kreisförmige layout

Zusammenfassung

Das ist alles für jetzt! Die Farbpaletten in diesem Artikel verwendet werden, von Farbe zu Jagen und Coolors.co.

Die Beispiele sind mit css erzeugt-doodle, außer für Ring-Beispiele im letzten Abschnitt. Hier kann alles gefunden werden, in diesem CodePen Sammlung.

Hoffe, Sie gefallen Euch und danke fürs Lesen!

Das Jetpack WordPress-plugin läuft auf dieser Website, indem Sie nicht nur die verwandten Beiträge unten, aber die Sicherheit und backups, Markdown-support, site-Suche, Kommentar-Formularen, social-network-verbindungen und vieles mehr!

SHARE
Previous articleMer Unicode Mønstre
Next articleMore Unicode Patterns