Verschachtelte Verläufe mit background-clip

Ich kann nicht sagen, dass ich background-clip oft verwende. Ich würde wetten, dass es im täglichen CSS-Arbeiten kaum genutzt wird. Aber ich wurde daran erinnert in einem Beitrag von Stefan Judis, der zufällig selbst eine Lernantwort auf einen Beitrag hier von Ana Tudor war.

Hier ist eine kurze Erklärung.

Sie haben das Ding wahrscheinlich schon tausendmal gesehen

Das zeigt Ihnen die Größe und Position eines Elements sowie wie sich diese Größe zusammensetzt: Inhaltsgröße, Padding, Margin und Border.

Diese Dinge sind nicht nur theoretisch, um beim Verstehen und Debuggen zu helfen. Elemente haben tatsächlich eine content-box, padding-box und border-box. Vielleicht begegnen wir dem am häufigsten, wenn wir die Eigenschaft box-sizing wörtlich einstellen. (Es ist enorm nützlich, sie universell auf border-box zu setzen).

Diese Werte sind die gleichen Werte, die background-clip verwendet! Das bedeutet, Sie können einen Hintergrund so einstellen, dass er nur diese spezifischen Bereiche abdeckt. Und da mehrere Hintergründe existieren, können wir mehrere Hintergründe mit unterschiedlichem Clipping für jeden haben.

So wie das

Siehe den Pen
Multiple background-clip von Chris Coyier (@chriscoyier)
auf CodePen.

Aber das ist langweilig und es gibt viele Möglichkeiten, diesen Effekt zu erzielen, wie z. B. die Verwendung von Borders, outline und box-shadow oder jede beliebige Kombination davon.

Was interessanter ist, ist die Tatsache, dass diese Hintergründe Verläufe sein könnten, und das ist auf andere Weise viel schwieriger zu realisieren!

Siehe den Pen
Nested Gradients von Chris Coyier (@chriscoyier)
auf CodePen.