Kreative Hintergrundmuster mit Farbverläufen, CSS-Formen und sogar Emojis

Sie können Streifen in CSS erstellen. Das war lange Zeit alles, was mir in Bezug auf CSS-Hintergrundmuster einfiel. An Streifen ist nichts auszusetzen; Streifen sind cool. Sie können zu breiten und schmalen Bändern angepasst, zu einem karierten Muster überkreuzt und auf andere Weise mit der Idee harter Übergänge gespielt werden. Aber Streifen können auch langweilig sein. Zu konventionell, aus der Mode gekommen und manchmal sogar unangenehm.

Glücklicherweise können wir mit CSS weitaus mehr Hintergrundmuster zaubern, als Sie sich vorstellen können, mit Code, der im Geiste der Streifen ähnlich ist.

Hintergrundmuster sind Bilder, die sich über einen Hintergrund wiederholen. Dies kann durch Verweis auf ein externes Bild, z. B. eine PNG-Datei, geschehen oder mit CSS gezeichnet werden, was traditionell mit CSS-Farbverläufen geschieht. 

Lineare Farbverläufe (und wiederholende lineare Farbverläufe) werden typischerweise für Streifen verwendet. Aber es gibt andere Möglichkeiten, coole Hintergrundmuster zu erstellen. Sehen wir uns an, wie wir Farbverläufe auf andere Weise nutzen und andere Dinge wie CSS-Formen und Emojis einwerfen können, um die Dinge aufzupeppen.

Farbverlaufsmuster

Es gibt drei Arten von CSS-Farbverläufen.

1. linear-gradient(): Farben fließen von links nach rechts, von oben nach unten oder in einem Winkel Ihrer Wahl in einer einzigen Richtung.
2. radial-gradient(): Farben beginnen an einem einzigen Punkt und strahlen nach außen aus.
3. conic-gradient(): Ähnlich im Konzept wie radiale Farbverläufe, aber die Farbunterbrechungen werden um den Kreis herum platziert, anstatt vom Mittelpunkt auszustrahlen.

Ich empfehle, die Syntax für alle Farbverläufe zu prüfen, um vollständig zu verstehen, wie man eine Farbe in einem Farbverlauf startet und beendet.

Radiale Farbverlaufsmuster

Betrachten wir zuerst radiale Farbverläufe, da sie uns sehr nützliche Dinge liefern: Kreise und Ellipsen. Beide können für Muster verwendet werden, die sehr interessant sind und vielleicht einige Ideen für Sie freisetzen!

background: radial-gradient(<gradient values>)

Hier ist ein Muster aus sich wiederholenden Wassermelonen, das mit dieser Technik erstellt wurde.

background: 
	radial-gradient(circle at 25px 9px, black 2px, transparent 2px), 
	radial-gradient(circle at 49px 28px, black 2px, transparent 2px), 
	radial-gradient(circle at 38px 1px, black 2px, transparent 2px), 
	radial-gradient(circle at 20px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 80px 4px, black 2px, transparent 2px), 
	radial-gradient(circle at 50px 10px, black 2px, transparent 2px), 
	radial-gradient(circle at 60px 16px, black 2px, transparent 2px), 
	radial-gradient(circle at 70px 16px, black 2px, transparent 2px), 
	radial-gradient(ellipse at 50px 0, red 33px, lime 33px, lime 38px, transparent 38px) 
	white;
background-size: 100px 50px;

Wir beginnen damit, eine Hintergrundgröße auf das Element anzuwenden, und stapeln dann die Farbverläufe darin. Eine Ellipse bildet die grünen und roten Teile. Schwarze Kreise sind darüber verstreut, um die Wassermelonensamen darzustellen. 

Die ersten beiden Parameter einer radialen Farbverlaufsfunktion bestimmen, ob die Farbverlaufsform ein Kreis oder eine Ellipse ist und die Startposition des Farbverlaufs. Darauf folgen die Farbverlaufswerte zusammen mit den Start- und Endpositionen innerhalb des Farbverlaufs.

Konische Farbverlaufsmuster

Konische Farbverläufe erzeugen strahlenförmige Formen. Wie lineare und radiale Farbverläufe können konische Farbverläufe zur Erstellung geometrischer Muster verwendet werden.

background: conic-gradient(<gradient values>)

background: 
  conic-gradient(yellow 40deg, blue 40deg, blue 45deg, transparent 45deg), 
  conic-gradient(transparent 135deg, blue 135deg, blue 140deg, transparent 140deg) ;
background-size: 60px 60px;
background-color: white;

Der Haken bei konischen Farbverläufen ist, dass sie in Firefox nicht unterstützt werden, zumindest zum Zeitpunkt des Schreibens. Es lohnt sich immer, auf eine breitere Unterstützung zu achten.

Emoji-Symbol-Muster

Hier wird es interessant. Anstatt nur geometrische Muster (wie bei Farbverläufen) zu verwenden, nutzen wir nun die organischen Formen von Emojis, um Hintergrundmuster zu erstellen. 🎉 

Es beginnt mit Emoji-Symbolen. 

Einfarbige Emoji-Muster

Wir können Emoji-Symbole erstellen, indem wir Emojis eine transparente Farbe und einen Textschatten geben.

color: transparent;
text-shadow: 0 0 black;

Diese Symbole können dann in ein Bild umgewandelt werden, das als Hintergrund verwendet werden kann, mithilfe von SVG.

<svg>
  <foreignObject>
    <!-- The HTML code with emoji -->
  </foreignObject>
</svg>

Das SVG kann dann über die Hintergrund-Eigenschaft mithilfe einer Daten-URL referenziert werden. 

background: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><!-- SVG code --></svg>");

Und, voilà! Wir erhalten etwas wie das hier.

background: 
    url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><foreignObject width=%22100px%22 height=%22100px%22><div xmlns=%22http://www.w3.org/1999/xhtml%22 style=%22color:transparent;text-shadow: 0 0 %23e42100, -2px 2px 0 black;font-size:70px%22>🏄‍♀️</div></foreignObject></svg>"), 
    white; 
background-size: 60px 60px; 

Abgesehen von Emojis ist es auch möglich, CSS-Formen zu zeichnen und sie als Muster zu verwenden. Emojis sind jedoch weniger Arbeit. Nur so am Rande. 

Farbverlauf-Emojis-Muster

Anstatt einfache Emoji-Symbole zu verwenden, können wir Farbverlauf-Emoji-Symbole verwenden. Überspringen Sie dazu den Textschatten bei den Emojis. Fügen Sie einen Farbverlaufshintergrund hinter ihnen hinzu und verwenden Sie background-clip, um den Farbverlaufshintergrund auf die Form der Emojis zuzuschneiden. 

color: transparent;
background: linear-gradient(45deg, blue 20%, fuchsia);
background-clip: text; /* Safari requires -webkit prefix */

Verwenden Sie dann, genau wie zuvor, die Kombination aus SVG und Daten-URL, um das Hintergrundmuster zu erstellen.

Transluzente Farbverlauf-Emojis-Muster

Dies ist dasselbe wie die Verwendung von einfarbigen Emoji-Symbolen. Diesmal nehmen wir jedoch die Opazität der Farben weg, indem wir rgba() oder hsla() Werte für den Textschatten verwenden. 

color: transparent;
text-shadow: 20px 10px rgba(0, 255, 0, .3), 
             0 0 red;

SVG-Text-Emoji-Muster

Wir haben uns bereits alle funktionierenden Methoden angesehen, die mir eingefallen sind, um Hintergrundmuster zu erstellen, aber ich denke, ich sollte auch diese andere Technik erwähnen, die nicht so weit verbreitet ist, wie ich gehofft hatte.

 Ich habe versucht, das Emoji in ein SVG-<text>-Element anstelle des HTML, das mit <foreignObject> hinzugefügt wurde, zu platzieren. Aber ich konnte in allen Browsern keinen soliden Schatten dahinter erzeugen.

background: 
  url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%221em%22 font-size=%2270%22 fill=%22transparent%22 style=%22text-shadow: 0 0 %23e42100, -2px 2px 5px black, 0 0 6px white; ;%22>🏄‍♀️</text></svg>")

Nur für den Fall, dass, versuchte ich auch CSS und SVG-Filter für den Schatten zu verwenden, in der Hoffnung, dass dies funktionieren würde. Es hat nicht funktioniert. Ich habe auch versucht, das `stroke`-Attribut zu verwenden, um zumindest eine Umrandung für das Emoji zu erstellen, aber das hat auch nicht funktioniert. 

CSS element()-Muster

Ich habe nicht an SVG gedacht, als ich zum ersten Mal darüber nachdachte, Emoji-Symbole oder CSS-Formen in Hintergrundbilder umzuwandeln. Ich habe CSS element() ausprobiert. Es ist eine Funktion, die ein HTML-Element direkt in ein Bild umwandelt, auf das verwiesen und das verwendet werden kann. Diesen Ansatz mag ich sehr, aber die Browserunterstützung ist ein großes Manko, weshalb ich ihn hier am Ende erwähne.

Im Grunde können wir ein Element im HTML wie folgt einfügen:

<div id=snake >🐍</div>

...und es dann in die element()-Funktion übergeben, um es wie ein Bild auf anderen Elementen zu verwenden, wie hier:

background: 
  -moz-element(#snake), /* Firefox only */
  linear-gradient(45deg, transparent 20px, blue 20px, blue 30px, transparent 30px) 
  white;
background-size: 60px 60px;
background-color: white;

Jetzt ist diese Schlangen-Emoji technisch gesehen ein Bild, das wir in das Muster aufnehmen können.

Auch hier ist die Browserunterstützung lückenhaft, was diesen Ansatz sehr experimentell macht.

Bei dieser Methode muss die ursprüngliche Emoji (oder jede beliebige CSS-Form) für das Hintergrundmuster auf dem Bildschirm gerendert werden, damit sie auch im Hintergrundmuster erscheint. Um das ursprüngliche Emoji zu verbergen, habe ich `mix-blend-mode` verwendet – es maskiert das ursprüngliche Emoji im HTML irgendwie, sodass es nicht auf der Seite angezeigt wird.

---

Ich hoffe, Sie finden die Methoden in diesem Beitrag in irgendeiner Weise nützlich und haben dabei etwas Neues gelernt! Probieren Sie sie aus. Experimentieren Sie mit verschiedenen Emojis und CSS-Formen, denn Farbverläufe sind zwar cool, aber nicht die einzige Möglichkeit, Muster zu erstellen. Die `background`-Eigenschaft akzeptiert mehrere Werte, sodass wir kreative Wege finden können, Dinge zu stapeln.