Erstellen von CSS-Formen mit Emoji

CSS Shapes ist ein Standard, mit dem wir geometrische Formen über floated Elements erstellen können, was dazu führt, dass die Inline-Inhalte – normalerweise Text – um diese Elemente herum entlang der angegebenen Formen umbrechen.

Ein solches textlich geformtes Layout sieht gut aus in redaktionellen Designs oder Designs, die mit textlastigen Inhalten arbeiten, um etwas visuelle Erleichterung von den Textblöcken zu schaffen.

Hier ist ein Beispiel für CSS Shape in Aktion

Die Eigenschaft shape-outside gibt die Form eines Floats mit entweder einer der grundlegenden Formfunktionen – circle(), ellipse(), polygon() oder inset() – oder einem Bild an, wie hier

Inline-Inhalt fließt entlang der rechten Seite eines links floatenden Elements und der linken Seite eines rechts floatenden Elements.

In diesem Beitrag verwenden wir das Konzept von CSS Shapes mit Emojis, um interessante Texteffekte zu erzielen. Bilder sind Rechtecke. Viele der Formen, die wir in CSS zeichnen, sind ebenfalls eckig oder zumindest auf Standardformen beschränkt. Emojis hingegen bieten tolle Möglichkeiten, aus dem Rahmen zu fallen!

So gehen wir vor: Wir erstellen zuerst ein Bild aus einem Emoji, lassen es dann float und wenden eine CSS-Form darauf an.

Ich habe bereits mehrere Möglichkeiten behandelt, Emojis in Bilder umzuwandeln, in diesem Beitrag über kreative Hintergrundmuster. Dort sagte ich, dass ich es nicht geschafft habe, SVG <text> für die Konvertierung zu verwenden, aber ich habe es jetzt herausgefunden und zeige Ihnen, wie das in diesem Beitrag geht. Sie müssen diesen Artikel nicht gelesen haben, damit dieser Sinn ergibt, aber er ist da, wenn Sie ihn sehen möchten.

Lassen Sie uns ein Emoji-Bild erstellen

Die drei Schritte, die wir zur Erstellung eines Emoji-Bildes verwenden, sind:

• Erstellen Sie einen Emoji-förmigen Ausschnitt in SVG
• Konvertieren Sie den SVG-Code in eine DataURL, indem Sie ihn URL-kodieren und mit data:image/svg+xml versehen
• Verwenden Sie die DataURL als url()-Wert für background-image eines Elements.

Hier ist der SVG-Code, der den Emoji-förmigen Ausschnitt erstellt

<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> 
  <clipPath id='emojiClipPath'> 
    <text x='0' y='130px' font-size='130px'>🦕</text> 
  </clipPath> 
  <text x='0' y='130px' font-size='130px' clip-path='url(#emojiClipPath)'>🦕</text>
</svg>

Was hier passiert, ist, dass wir einem <text>-Element ein Emoji-Zeichen für einen <clipPath> zur Verfügung stellen. Ein Pfad wird geschnitten ist die Umrisslinie eines Bereichs, der sichtbar bleiben soll, wenn dieser Pfad auf ein Element angewendet wird. In unserem Code ist dieser Umriss die Form des Emoji-Zeichens.

Dann wird der Pfad des Emojis von einem <text>-Element referenziert, das dasselbe Emoji-Zeichen trägt, indem seine clip-path-Eigenschaft verwendet wird, wodurch ein Ausschnitt in der Form des Emojis entsteht.

Nun konvertieren wir den SVG-Code in eine DataURL. Sie können ihn von Hand URL-kodieren oder Online-Tools verwenden (wie dieses!), die das für Sie erledigen können.

Hier ist die resultierende DataURL, die als url()-Wert für das Hintergrundbild eines .emoji-Elements in CSS verwendet wird

.emoji {
  background: url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='0' y='130px'  font-size='130px'>🦕</text> </clipPath> <text x='0' y='130px' font-size='130px' clip-path='url(%23emojiClipPath)'>🦕</text></svg>");
}

Wenn wir hier aufhören und dem .emoji-Element Dimensionen geben würden, würden wir unser Zeichen als Hintergrundbild sehen

Lassen Sie uns das nun in eine CSS-Form verwandeln

Das können wir in zwei Schritten tun

• Das Element mit dem Emoji-Hintergrund floaten
• Die DataURL als url()-Wert für die shape-outside-Eigenschaft des Elements verwenden

.emoji {
  --image-url: url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='0' y='130px'  font-size='130px'>🦕</text> </clipPath> <text x='0' y='130px'  font-size='130px' clip-path='url(#emojiClipPath)'>🦕</text></svg>");
  background: var(--image-url);
  float: left;
  height: 150px;
  shape-outside: var(--image-url);
  width: 150px;
  margin-left: -6px; 
}

Wir haben die DataURL in einer benutzerdefinierten Eigenschaft, --image-url, platziert, damit wir sie leicht sowohl in den background- als auch in den shape-outside-Eigenschaften referenzieren können, ohne diese große Zeichenfolge von kodiertem SVG mehrmals zu wiederholen.

Nun fließt jeglicher Inline-Inhalt in der Nähe des floatenden .emoji-Elements in der Form des Emojis. Wir können Dinge mit margin oder shape-margin weiter anpassen, um zusätzlichen Platz um die Form herum zu schaffen.

Wenn Sie eine farbige Emoji-Form wünschen, können Sie dies tun, indem Sie den Pfad auf ein <rect>-Element im SVG anwenden

<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> 
    <clipPath id='emojiClipPath'> 
        <text x='0' y='130px' font-size='130px'>🦕</text> 
    </clipPath> 
    <rect x='0' y='0' fill='green' width='150px' height='150px' clip-path='url(#emojiClipPath)'/> 
</svg>

Die gleiche Technik funktioniert auch mit Buchstaben!

Beachten Sie nur, dass Firefox die Emoji-Form nicht immer rendert. Wir können das umgehen, indem wir den SVG-Code aktualisieren.

<svg xmlns='http://www.w3.org/2000/svg' width='150px' height='150px'>
  <foreignObject width='150px' height='150px'>
    <div xmlns='http://www.w3.org/1999/xhtml' style='width:150px;height:150px;line-height:150px;text-align:center;color:transparent;text-shadow: 0 0 black;font-size:130px;'>🧗</div>
  </foreignObject>
</svg>

Dies erstellt eine Emoji-Form mit blockfarbigem Hintergrund, indem das Emoji transparent gemacht und mit text-shadow mit Inline-CSS versehen wird. Das <div>, das das Emoji und das Inline-CSS-Styling enthält, wird dann in ein <foreignObject>-Element von SVG eingefügt, damit der HTML <div>-Code innerhalb des SVG-Namensraums verwendet werden kann. Der Rest des Codes dieser Technik ist derselbe wie beim letzten Mal.

Nun müssen wir die Form zentrieren

Da CSS Shapes nur auf floated Elemente angewendet werden können, fließt der Text entweder nach rechts oder links vom Element, abhängig davon, auf welcher Seite es floatet. Um das Element und die Form zu zentrieren, werden wir Folgendes tun:

• Das Emoji in zwei Hälften teilen
• Die linke Hälfte des Emojis nach rechts und die rechte Hälfte nach links floaten lassen
• Beide Seiten wieder zusammenfügen!

Eine Einschränkung dieser Strategie: Wenn Sie laufende Sätze im Design verwenden, müssen Sie die Buchstaben auf beiden Seiten manuell ausrichten.

Hier ist, was wir anstreben

Zuerst sehen wir das HTML für die linke und rechte Seite des Designs. Sie sind identisch.

<div id="design">
  <p id="leftSide">A C G T A <!-- more characters --> C G T A C G T A C G T <span class="emoji"></span>A C G <!-- more characters --> C G T </p>
  <p id="rightSide">A C G T A <!-- more characters --> C G T A C G T A C G T <span class="emoji"></span>A C G <!-- more characters --> C G T </p>
</div>

p#leftSide und p#rightSide innerhalb von #design sind nebeneinander in einem Grid angeordnet.

#design {
  border-radius: 50%; /* A circle */
  box-shadow: 6px 6px 20px silver;
  display: grid; 
  grid: "1fr 1fr"; /* A grid with two columns */
  overflow: hidden;
  width: 400px; height: 400px;
}

Hier ist das CSS für das Emoji

span.emoji {
  filter: drop-shadow(15px 15px 5px green);
  shape-margin: 10px;
  width: 75px; 
  height: 150px;
}

/* Left half of the emoji */
p#leftSide>span.emoji {
  --image-url:url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='0' y='130px'  font-size='130px'>🦎</text> </clipPath> <rect x='0' y='0' width='150px' height='150px' clip-path='url(%23emojiClipPath)'/></svg>");
  background-image: var(--image-url);
  float: right;
  shape-outside: var(--image-url);
}

/* Right half of the emoji */
p#rightSide>span.emoji {
  --image-url:url("data:image/svg+xml,<svg width='150px' height='150px' xmlns='http://www.w3.org/2000/svg'> <clipPath id='emojiClipPath'> <text x='-75px' y='130px'  font-size='130px'>🦎</text> </clipPath> <rect x='0' y='0' width='150px' height='150px' clip-path='url(%23emojiClipPath)'/></svg>");
  background-image: var(--image-url);
  float: left;
  shape-outside: var(--image-url);
}

Die Breite der <span>-Elemente, die die Emoji-Bilder halten (span.emoji), beträgt 75px, während die Breite der SVG-Emoji-Bilder 150px beträgt. Dies schneidet das Bild automatisch halb, wenn es innerhalb der Spans angezeigt wird.

Auf der rechten Seite des Designs, mit dem links floatenden Emoji (p#rightSide>span.emoji), müssen wir das Emoji um die Hälfte nach links verschieben, um die rechte Hälfte anzuzeigen, daher wird der x-Wert in der <text> in der DataURL auf 75px geändert. Das ist der einzige Unterschied in den DataURLs der linken und rechten Seite des Designs.

Hier ist das Ergebnis noch einmal

---

Das war's! Sie können die obige Methode verwenden, um jede CSS-Form zu zentrieren, solange Sie das Element in zwei Teile teilen und die Hälften mit CSS wieder zusammenfügen können.