Wie man Text mit element() als Hintergrundbild in CSS wiederholt

Es gibt einen Designtrend, den ich überall sehe. Vielleicht haben Sie ihn auch gesehen. Es ist diese Art von Dingen, bei denen Text immer wieder wiederholt wird. Ein gutes Beispiel ist die Preisvergleichswebsite GoCompare, die ihn in einer großen Multi-Channel-Werbekampagne eingesetzt hat.

Nike hat ihn ebenfalls verwendet, wie in dieser Anzeige

Ich konnte nicht anders, als mich zu fragen, wie ich diese Art von Design für das Web umsetzen würde. Ich meine, wir könnten den Text offensichtlich einfach im Markup wiederholen. Wir könnten das Design auch als Bild exportieren, zum Beispiel mit Photoshop, aber Text in Bildern ist schlecht für SEO und Barrierefreiheit. Dann ist da noch die Tatsache, dass selbst wenn wir tatsächlichen Text verwenden würden, es nicht so wäre, als ob wir möchten, dass ein Screenreader ihn vorliest.

Vielseitigkeit
Vielseitigkeit
Vielseitigkeit
Vielseitigkeit

Okay, hören Sie schon auf!

Diese Überlegungen lassen es unrealistisch erscheinen, so etwas im Web zu tun. Dann fand ich mich dabei, nach der seit langem bestehenden, aber schlecht unterstützten element()-Funktion in CSS zu sehnen. Sie ermöglicht die Verwendung jedes HTML-Elements als Hintergrundbild, sei es ein einzelnes Schaltflächenelement oder ein ganzes <div> voller Inhalt.

Laut der Spezifikation

Die element()-Funktion reproduziert nur das Erscheinungsbild des referenzierten Elements, nicht den tatsächlichen Inhalt und seine Struktur. Autoren sollten dies nur für dekorative Zwecke verwenden.

Für unsere Zwecke würden wir ein Textelement referenzieren, um diesen Wiederholungseffekt zu erzielen.

Definieren wir eine ID, die wir auf das Textelement anwenden können, das wir wiederholen möchten. Nennen wir es #thingy. Beachten Sie, dass wir, wenn wir #thingy verwenden, den element()-Wert mit -moz- präfixieren müssen. Während element() in Firefox seit 2010 unterstützt wird, hat es sich leider seitdem nicht in anderen Browsern durchgesetzt.

.element {
  background-image: -moz-element(#thingy);
}

Hier ist eine etwas lose Nachbildung der Nike-Anzeige, die wir zuvor gesehen haben. Auch hier ist Firefox erforderlich, um die Demo wie beabsichtigt zu sehen.

Sehen Sie, wie das konzeptionell funktioniert? Ich habe ein Element (#versatility) auf der Seite platziert, es durch Zuweisung einer Höhe von null versteckt, es als background-image auf den Body gesetzt und dann die background-repeat-Eigenschaft verwendet, um es vertikal über die Seite zu duplizieren.

Der element()-Hintergrund ist live. Das bedeutet, dass sich das Erscheinungsbild des background-image auf dem Element, das es verwendet, ändert, wenn sich das referenzierte HTML-Element ändert. Es ist dasselbe wie bei der Arbeit mit benutzerdefinierten Eigenschaften: Ändern Sie die Variable und sie aktualisiert sich überall dort, wo sie verwendet wird.

Es gibt natürlich noch andere Anwendungsfälle für diese Eigenschaft. Sehen Sie, wie Preethi sie verwendet hat, um In-Page-Scroll-Navigation für einen Artikel zu erstellen. Sie könnten auch ein HTML-Canvas-Element als Hintergrund verwenden, wenn Sie es ausgefallen mögen. Eine Möglichkeit, wie ich es verwendet habe, ist, Screenshots von Seiten in einem Inhaltsverzeichnis anzuzeigen. Vincent De Oliveira hat einige wild kreative Beispiele dokumentiert. Hier ist ein Spiegelbild-Effekt, wenn Sie auf Retro-Webdesign stehen

---

Ziemlich nett, oder? Auch hier wünschte ich, ich könnte sagen, dass dies ein produktionsreifer Ansatz ist, um diesen netten Designeffekt zu erzielen, aber die Dinge sind im Moment, wie sie sind. Eigentlich ist das eine gute Erinnerung daran, Ihre Stimme für Funktionen geltend zu machen, die Sie in Browsern implementiert sehen möchten. Es gibt offene Tickets in WebKit und Chromium, wo Sie dies tun können. Hoffentlich werden wir diese Funktion irgendwann in Safari- und Chrome-Browsern erhalten.