Dekoration Zeilen text mit Kasten-Dekoration-brechen

0
38

Eine institution ist das motto, ein Künstler, der intro, einem Unternehmen mit dem Slogan, eine Gemeinde das Prinzip des Dienstes Gruß… alle haben eine Sache gemeinsam: Sie sind einem kurzen Absatz auf einer Webseite angezeigt werden die Homepage — oder zumindest auf der Seite!

Es ist selten, dass nur ein Wort oder eine Zeile text begrüßt Sie zu einer website. So, schauen wir uns einige interessante Möglichkeiten, wir könnten Stil den Zeilen eines Absatzes.

Zu sehen, wie die Dinge derzeit sind, lassen Sie uns versuchen geben Grenzen für alle Linien von text in einem inline-span und sehen, wie es aussieht:

<p><span>Kolibris sind Vögel aus…</span></p>
span {
border: 2px solid;
}

Finden Sie den Stift Gebrochen inline-box. von Preethi (@rpsthecoder) auf CodePen.

Die Kanten werden gebrochen, die Sie technisch sind, wie die inline-box wurde zersplittert in mehrere Linien. Aber das können wir beheben die gebrochenen Kanten mit box-decoration-break!

Die box-decoration-break-Eigenschaft in CSS können schmücken die Kanten der Fragmente eines gebrochenen inline-box (sowie eine Seite, Spalte und region-Boxen).

Seinen Wert, Klonen, bedeutet das, dass mit dem gleichen design, wird in der box die ungebrochenen Kanten, und seine default-Wert, in Scheiben schneiden, nicht kopieren Sie die Dekorationen auf den Kanten, halten die Pause sehr gut sichtbar, wie Sie sah in der demo oben.

Versuchen wir es:

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

Finden Sie den Stift Gebrochen inline-box w/ box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Die Eigenschaft wirkt sich nicht nur auf die Grenze, aber auch der Schatten, den Abstand und den hintergrund des gebrochenen Kanten.

Let ‘ s play mit dem hintergrund zum ersten mal. Beim schreiben der post auf den ko-text, ich arbeite mit der hintergrund-clip-Eigenschaft und wollte sehen, ob das design hielt sich für mehrere Zeilen text. Das ist es nicht.

Der hintergrund-Verlauf habe ich mich beworben, wurde nicht repliziert, in jeder Linie, und nach dem beschneiden es, nur die erste war die linke mit einem hintergrund. Das ist, es sei denn, Kasten-Dekoration-brechen: Klon Hinzugefügt:

<p><span>Singapur:<br>Lion City</span></p>
span {
background-image: linear-gradient(135deg, gelb, Violett);
background-clip: text;
Farbe: transparent;
Polsterung: .5em;
box-decoration-break: Klon;
}

Finden Sie die Stift-Gradient multi-line-text-w/box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Der hintergrund-clip-Eigenschaft mit Textwert clips einen hintergrund, der Form, der text im Vordergrund. Da wir verwendeten box-decoration-break, den Farbverlauf-hintergrund wird angezeigt und beschnittene gleichmäßig über alle Zeilen des Textes.

Gehen wir zurück zur Grenze, mal sehen, wie seine Form und Schatten können kopiert werden über die gebrochene Kanten, zusammen mit der Polsterung:

<img src=”Baum.png”>
<p><span>Supertrees sind baumartige Strukturen…</span></p>
<img src=”Baum.png”>
<p><span>Supertrees sind baumartige Strukturen…</span></p>
span {
hintergrund: rgb(230,157,231);
border-radius: 50% 0%;
box-shadow: 0 0 6px rgb(41,185,82), 0 0 3px beige inset;
Polsterung: .5em 1.3 em;
box-decoration-break: Klon;
}

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

Finden Sie die Stift-Inline-Grenze shape & shadow w/box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Im zweiten Absatz der demo, der hintergrund abgeschnitten wird, bis das Feld Inhalt (background-clip: content-box). Wie Sie sehen können, ist die Ernte geschieht in den gebrochenen Kanten, da der box-decoration-break: Klon.

Ein anderer Weg, wir können die Stil-Grenzen ist mit Bildern. Möglicherweise sehen Sie eine Farbverlauf-Rahmen um die Textzeilen unten, bedecken die Kanten gebrochen, wenn der browser Sie verwenden jetzt unterstützt border-image und die Anwendung der box-decoration-break über sein Ergebnis.

<p><span>Der Malaysia–Singapore Second Link…</span></p>
span {
border: 2px solid;
border-image: linear-gradient(45deg, #eeb075, #2d4944) 1;
background: #eef6f3;
Polsterung: .5em 1.3 em;
box-decoration-break: Klon;
}

Finden Sie die Stift-Inline-Rand-Bild w/ box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Eine zusätzliche Verhalten, das wir anzapfen können für die Dekoration, einzelne Linien ist der Umriss. In unterstützten Browsern, Kasten-Dekoration-brechen können, fügen Sie eine Umrandung zu jeder Zeile des Textes, einschließlich der gebrochene Kanten, die nützlich für die Erstellung Zweifarbige gestrichelte Grenzen.

<p><span>Cloud Forest repliziert…</span></p>
span {
outline: 2px dashed rgb(216,255,248);
box-shadow: 0 0 0 2px rgb(39,144,198);
background: #fffede;
Polsterung: .5em 1.3 em;
animation: 1s animateBorder ease unendliche;
box-decoration-break: Klon;
}

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

Finden Sie die Stift-Inline-outline w/ box-decoration-break. von Preethi (@rpsthecoder) auf CodePen.

Wie bereits in der demo -, Kasten-Dekoration-brechen widersteht animation.

Neben Grenzen und Hintergründe, das box-decoration-break können Sie auch verwalten, Formen, angewendet auf Elemente. Es gibt nicht viel Verwendung für Sie im inline-Boxen, und ist vielleicht besser in einer Spalte oder Seite, die box, obwohl die Anwendung noch nicht weit unterstützt, dass in Browsern.

Aber um zu zeigen, ein Beispiel, was das bedeutet, lassen Sie uns versuchen, die Anwendung der clip-Pfad-Eigenschaft, um die span.

Die Eigenschaft clip-path selbst ist nur voll von Firefox unterstützt, so dass nur er Sie sehen könnte ein erwartetes Ergebnis. Aber folgende zwei Bilder: die Ergebnisse der Anwendung einer kreisförmigen Pfad von Clips über die Spanne, ohne und mit box-decoration-break.

span {
clip-path: Kreis(50% bei 202.1165 px 69.5 px);

}

Runder clip-path auf ein span

span {
clip-path: Kreis(50% bei 202.1165 px 69.5 px);
box-decoration-break: Klon;

}

Runder clip-path auf ein span mit Kasten-Dekoration-brechen: Klon

Sie werden bemerken, das erste Bild, das 50% – radius-Wert ergibt sich aus der Breite der inline-box (die längste Strecke), wo box-decoration-break wird nicht verwendet.

Das zweite Bild zeigt, wie box-decoration-break: Klon definiert der berechnete Wert für die 50% durch Ausrichtung auf die Breite der einzelnen Linien, während die Mitte, wie vor.

Und hier ist, wie die inset-Funktion clip-Pfad (ein eingesetztes Rechteck) aufgetragen über der Spanne clips es ohne und mit box-decoration-break:

span {
clip-path: inset(0);

}

Einschub-clip-path auf ein span

span {
clip-path: inset(0);
box-decoration-break: Klon;

}

Einschub-clip-path auf ein span mit Kasten-Dekoration-brechen: Klon

Ohne Kasten-Dekoration-brechen, nur ein Teil der ersten Zeile entspricht der Länge des kürzesten sichtbar ist, und mit box-decoration-break: Klonen, die erste Zeile ist vollständig sichtbar, während der rest der box ist abgeschnitten.

Also, vielleicht, wenn Sie jemals wollen, um nur die erste Zeile und blenden Sie den rest, dieses kann in handliches kommen. Aber, wie ich bereits erwähnt habe, ist diese Anwendung besser geeignet für andere Arten von Boxen, als diejenigen, die inline. So oder so, ich wollte Euch mal zeigen, wie es funktioniert.

Zusammenfassung

Die box-decoration-break: Klon-Kopien eines grenzüberschreitenden, räumlichen und hintergrund-designs angewendet auf eine fragmentierte inline-box ist ungebrochen Kanten, um seine zerbrochene. Dies schafft eine selbst-design auf allen Linien des Textes, dekorieren Sie Sie gleichmäßig und super nützlich für alle, die blurbs der text, den wir Häufig verwenden, auf websites.