Bin auf diesen Thread gestoßen
CSS-Superfreunde! Habt ihr Beispiele gesehen, wie man mehrzeiligen, gepolsterten Text wie in diesem Artikel auf @css (https://#/2j8p4jmaT4) macht, aber mit einem Gradienten, der sich nicht für jede Zeile zurücksetzt? pic.twitter.com/MVPdAjxt1W
— Dan Mall (@danmall) 3. Dezember 2018
Mein erster Gedankengang war
- Die Zeilen sind gepolstert, und das ist schwierig genug zu schaffen.
box-decoration-breakist wahrscheinlich unser Freund hier.
Aber es stellt sich heraus, dass wir ein klein wenig extra Trickerei brauchen, um es zu schaffen.
Wenn eine solide Farbe ausreicht, dann sollten etwas Polsterung in Kombination mit box-decoration-break das Grundgerüst bilden
Siehe den Pen Multiline Padding with box-decoration-break von Chris Coyier (@chriscoyier) auf CodePen.
Aber ein Gradient darauf wird auf mehreren Zeilen komisch aussehen
Siehe den Pen Multiline Padding with box-decoration-break von Chris Coyier (@chriscoyier) auf CodePen.
Ich werde Matthias Ott aus diesem Thread die Anerkennung für die Antwort geben, die für mich perfekt erscheint
Siehe den Pen Multiline background gradient with mix-blend-mode von Matthias Ott (@matthiasott) auf CodePen.
Der Trick besteht darin, den gepolsterten mehrzeiligen Hintergrund mit reinweißem Text und schwarzem Hintergrund genau so einzurichten, wie Sie es wünschen. Dann wird ein Pseudo-Element über den gesamten Bereich mit dem Gradienten im schwarzen Bereich gelegt. Fügen Sie mix-blend-mode: lighten; hinzu, um den Gradienten nur im schwarzen Bereich erscheinen zu lassen. Gute Arbeit.
Das ist ein netter Trick. Wenn ich eine kleine Verbesserung vorschlagen darf: fügen Sie
pointer-events: none;zum Pseudo-Element hinzu. Auf diese Weise können Benutzer den Text auswählen (derzeit in Firefox für Mac nicht möglich).Ich glaube, die Reihenfolge der Präfixe für die box-decoration-Eigenschaft sollte umgekehrt werden: zuerst der Präfix, zuletzt der Standard. Andernfalls wird die geprägte Eigenschaft angewendet.
Vergessen Sie nicht
pointer-events: noneauf dem Pseudo-Element, damit der Text weiterhin auswählbar ist (falls erforderlich)In diesem Fall können Sie die
background-colorvon.gradient-multiline spanauf#3629a2setzen, die gleiche Farbe wie der Anfang des linearen Gradienten, und der Effekt funktioniert immer noch. Browser, diemix-blend-mode: lightennicht unterstützen, sehen dem gewünschten Design näher, anstatt weißem Text in einer schwarzen Box.In diesem Fall funktioniert es nur, wenn mein Hintergrund weiß ist
*Es funktioniert, wenn der Hintergrund dahinter solide ist; wenn die Farbe hinter der mehrzeiligen Textzeile die gleiche ist wie der Seitenhintergrund, wird der Effekt vervollständigt.
Zu diesem Punkt ist "overflow: hidden;" überflüssig.
Nur zur Information: Dieser Lighten-Trick funktioniert nur, wenn die Hintergrundfarbe weiß ist.
Hallo zusammen!
Danke für eure Kommentare!
Ich habe
pointer-events: nonehinzugefügt und die Reihenfolge der geprägten und ungeprägtenbox-decoration-breakim Pen geändert.Und ihr habt Recht, dass dies nur auf weißen Hintergründen funktioniert. Ich habe es als rohen Pen erstellt, um zu untersuchen, ob es irgendwie gemacht werden kann, aber wenn Sie es in der Produktion verwenden möchten, ist sicherlich noch mehr Arbeit zu tun.
sehr cool