Ich kann nicht sagen, dass ich background-clip oft benutze. Ich wette, es wird im alltäglichen CSS-Gebrauch kaum verwendet. Aber ich wurde in einem Beitrag von Stefan Judis daran erinnert, der zufällig selbst eine Lernantwort auf ... war.
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)
Nehmen wir an, Sie benötigen einen Verlauf-Rand um ein Element. Meine Gedanken gehen wie folgt:
linear-gradient-Hintergrund, dann blockiert ein inneres Element
Wenn Sie einen Farbverlauf wünschen, der sich ändert, wenn Sie auf einer sehr langen Seite nach unten scrollen, können Sie einen Farbverlauf mit vielen Farbstopps erstellen, ihn auf das Body-Element anwenden und er wird genau das tun.
Aber was ist, wenn …
Mit „CSS-Bildern“ meine ich Bilder, die ausschließlich mit HTML-Elementen und CSS erstellt werden. Sie sehen aus, als wären sie in Adobe Illustrator gezeichnete SVGs, wurden aber direkt im Browser erstellt. Einige Techniken, die ich gesehen habe …
Im Jahr 2012 kam der Internet Explorer 10 heraus und unterstützte unter anderem endlich CSS-Verläufe und zusätzlich die Möglichkeit, diese nur mit CSS zu animieren! Kein anderer Browser unterstützte dies zu dieser Zeit, aber ich …
Radialverläufe sind ziemlich cool. Es ist erstaunlich, dass wir damit den Hintergrund eines Elements so einfach bemalen können. Einfach ist allerdings ein relativer Begriff. Es ist sicherlich einfacher, als eine Grafik in einer Drittanbieter-Software erstellen zu müssen, um sie zu verwenden ...
Keith J. Grant
In CSS können Sie keinen Hintergrundverlauf überblenden. Er springt sofort von einem Verlauf zum anderen, ohne einen sanften Übergang dazwischen.
Er dokumentiert eine clevere Taktik, ein Pseudo-Element so zu positionieren, dass es das Element abdeckt …
