Dekorieren von Textzeilen mit box-decoration-break

Der Wahlspruch einer Institution, die Einführung eines Künstlers, der Slogan eines Unternehmens, das Prinzip einer Gemeinschaft, die Begrüßung eines Dienstes … all diese Dinge haben eines gemeinsam: Sie sind ein kurzer Absatz, der auf der Homepage einer Website angezeigt wird – oder zumindest auf der Über-uns-Seite!

Es ist selten, dass nur *ein* Wort oder *eine* Zeile Text Sie auf einer Website willkommen heißt. Lassen Sie uns also einige interessante Möglichkeiten betrachten, wie wir die *Zeilen* eines Absatzes gestalten könnten.

Um zu sehen, wie die Dinge derzeit aussehen, versuchen wir, allen Zeilen eines Textes in einem Inline-span Ränder zu geben und zu sehen, wie es aussieht

<p><span>Hummingbirds are birds from...</span></p>

span {
  border: 2px solid;
}

Siehe den Pen Gebrochene Inline-Box. von Preethi (@rpsthecoder) auf CodePen.

Die Ränder erscheinen gebrochen, was sie technisch gesehen auch sind, da die Inline-Box in mehrere Zeilen zerlegt wurde. Aber wir können diese gebrochenen Ränder mit box-decoration-break beheben!

Die CSS-Eigenschaft box-decoration-break kann die Ränder von Fragmenten einer gebrochenen Inline-Box (sowie von Seiten-, Spalten- und Regions-Boxen) dekorieren.

Sein Wert, clone, tut dies mit demselben Design, das auf den ungebrochenen Rändern der Box erscheint, und sein Standardwert, slice, kopiert die Dekorationen an den Rändern *nicht*, wodurch der Bruch wie in der obigen Demo sehr sichtbar bleibt.

Versuchen wir es

span {
  border: 2px solid;
  box-decoration-break: clone;
}

Siehe den Pen Gebrochene Inline-Box mit box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Die Eigenschaft beeinflusst nicht nur den Rand, sondern auch den Schatten, den Abstand und den Hintergrund der gebrochenen Ränder.

Lassen Sie uns zuerst mit dem Hintergrund herumspielen. Während ich den Beitrag über Knockout-Text schrieb, arbeitete ich mit der background-clip-Eigenschaft und wollte sehen, ob das Design für mehrere Textzeilen Bestand hat. Das tat es nicht.

Der von mir angewendete Hintergrundverlauf wurde nicht in jeder Zeile repliziert, und nach dem Zuschneiden war nur die erste Zeile mit einem Hintergrund übrig. Das heißt, es sei denn, box-decoration-break: clone wird hinzugefügt

<p><span>Singapore:<br>Lion City</span></p>

span {
  background-image: linear-gradient(135deg, yellow, violet);
  background-clip: text;
  color: transparent;
  padding: .5em;
  box-decoration-break: clone;
}

Siehe den Pen Gradienten-Mehrzeilentext mit box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Die Eigenschaft background-clip mit dem Wert text schneidet einen Hintergrund auf die Form des Vordergrundtextes zu. Da wir box-decoration-break verwendet haben, wird der Hintergrundverlauf über *alle* Textzeilen hinweg einheitlich angezeigt und zugeschnitten.

Zurück zum Rand, sehen wir, wie seine Form und sein Schatten über die gebrochenen Ränder kopiert werden können, zusammen mit dem Innenabstand

<img src="tree.png">
<p><span>Supertrees are tree-like structures...</span></p>
<img src="tree.png">
<p><span>Supertrees are tree-like structures...</span></p>

span {
  background: rgb(230,157,231);
  border-radius: 50% 0%;
  box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige inset;
  padding: .5em 1.3em;
  box-decoration-break: clone;
}

p:nth-of-type(2) span {
  background-clip: content-box;
}

Siehe den Pen Inline-Randform & Schatten mit box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Im zweiten Absatz der Demo wird der Hintergrund bis zur Inhaltsbox zugeschnitten (background-clip: content-box). Wie Sie sehen können, geschieht der Schnitt auch an den gebrochenen Rändern, dank box-decoration-break: clone.

Eine weitere Möglichkeit, Ränder zu gestalten, sind Bilder. Möglicherweise sehen Sie einen Verlaufrand um die Textzeilen unten, der die gebrochenen Ränder abdeckt, wenn der von Ihnen verwendete Browser border-image und die Anwendung von box-decoration-break über dessen Ergebnis unterstützt.

<p><span>The Malaysia–Singapore Second Link...</span></p>

span {
  border: 2px solid;
  border-image: linear-gradient(45deg, #eeb075, #2d4944) 1;
  background: #eef6f3;
  padding: .5em 1.3em;
  box-decoration-break: clone;
}

Siehe den Pen Inline-Randbild mit box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Ein zusätzliches Verhalten, das wir zur Dekoration einzelner Zeilen nutzen können, ist das von outline. In unterstützten Browsern kann box-decoration-break jede Textzeile, einschließlich der gebrochenen Ränder, mit einer Umrandung versehen, was für die Erstellung zweifarbiger gestrichelter Ränder nützlich ist.

<p><span>Cloud Forest replicates...</span></p>

span {
  outline: 2px dashed rgb(216,255,248);
  box-shadow: 0 0 0 2px rgb(39,144,198);
  background: #fffede;
  padding: .5em 1.3em;
  animation: 1s animateBorder ease infinite;
  box-decoration-break: clone;
}

@keyframes animateBorder{
  to{
    outline-color: rgb(39,144,198);
    box-shadow: 0 0 0 2px rgb(216,255,248);
  }
}

Siehe den Pen Inline-Umrandung mit box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Wie in der Demo zu sehen ist, hält box-decoration-break Animationen stand.

Neben Rändern und Hintergründen kann box-decoration-break auch Formen verwalten, die über Elementen angewendet werden. Für Inline-Boxen gibt es dafür nicht viel Verwendung, und es ist vielleicht besser in einer Spalten- oder Seitenbox anzuwenden, obwohl die Anwendung in Browsern noch nicht weit verbreitet ist.

Um ein Beispiel dafür zu geben, was das bewirkt, versuchen wir, die clip-path-Eigenschaft auf das span anzuwenden.

Die Eigenschaft clip-path selbst wird nur von Firefox vollständig unterstützt, daher sehen Sie nur dort möglicherweise ein erwartetes Ergebnis. Aber im Folgenden sind zwei Bilder: die Ergebnisse der Anwendung eines kreisförmigen Ausschnitts auf das span, ohne und mit box-decoration-break.

span {
  clip-path: circle(50% at 202.1165px 69.5px);
  ...
}

span {
  clip-path: circle(50% at 202.1165px 69.5px);
  box-decoration-break: clone;
  ...
}

Sie werden im ersten Bild bemerken, dass der Radiuswert von 50% vom Breit des Inline-Elements (der längsten Zeile) abgeleitet ist, wenn box-decoration-break nicht verwendet wird.

Das zweite Bild zeigt, wie box-decoration-break: clone den berechneten Wert für 50% neu definiert, indem er ihn auf die Breiten der einzelnen Zeilen stützt und dabei das Zentrum beibehält.

Und hier ist, wie die Funktion inset von clip-path (ein zugeschnittener Rechteck) auf das span angewendet wird, wie es es ohne und mit box-decoration-break zuschneidet

span {
  clip-path: inset(0);
  ...
}

span {
  clip-path: inset(0);
  box-decoration-break: clone;
  ...
}

Ohne box-decoration-break ist nur ein Teil der ersten Zeile sichtbar, der der Länge der kürzesten entspricht. Mit box-decoration-break: clone ist die erste Zeile vollständig sichtbar, während der Rest der Box abgeschnitten wird.

Wenn Sie also vielleicht nur die erste Zeile anzeigen und den Rest ausblenden möchten, kann dies nützlich sein. Aber, wie ich bereits erwähnt habe, ist diese Anwendung besser für andere Arten von Boxen geeignet als für Inline-Boxen. So oder so, ich wollte Ihnen zeigen, wie es funktioniert.

Browser-Unterstützung

Wie wir hier gesehen haben, kann box-decoraton-break sehr nützlich sein und eröffnet viele Möglichkeiten, wie z. B. die Erstellung cooler Texteffekte. Die Eigenschaft wird mit dem Präfix -webkit gut unterstützt, befindet sich aber zum Zeitpunkt des Schreibens noch im Working Draft und hat keine Unterstützung in Internet Explorer und Edge. Hier können Sie für die Edge-Unterstützung abstimmen.

Zusammenfassend

box-decoration-break: clone kopiert alle Rand-, Raum- und Hintergrunddesigns, die auf den ungebrochenen Rändern einer fragmentierten Inline-Box angewendet werden, auf ihre gebrochenen. Dies erzeugt ein einheitliches Design über alle Textzeilen hinweg, dekoriert sie gleichmäßig und kann für all die Textblöcke, die wir häufig auf Websites verwenden, sehr nützlich sein.