Cutouts

Ahmad Shadeed hat sich neulich mit „Ausschnitten“ beschäftigt. Stellen Sie sich eine Form vor, aus der eine kleinere Form herausgeschnitten ist. In seiner typisch umfassenden Art hat Ahmad die Situation gut dargelegt – und knifflige Situationen betrachtet, die die Dinge komplizieren.

Das Erste, woran ich denken würde, wäre CSS clip-path, da es die circle()-Syntax hat, die gut zu passen scheint, aber nein!, wir brauchen das Gegenteil dessen, was clip-path: circle() tut, da wir hier keinen Kreis zeichnen, der den Clipping-Pfad darstellt, sondern wir zeichnen einmal um die Form herum und dann in den zweiten kleineren Kreis hinein und wieder heraus, wie ein Bissen aus einem Keks. Das bringt uns in den Bereich von clip-path: path(), was gnädigerweise existiert, unddennoch!, es reicht nicht ganz, da die path()-Syntax in CSS nur mit festen Pixeleinheiten funktioniert, was in flüssigen Layouts oft zu einschränkend ist.

Das bringt uns also zu clip-path: url("#my-path"); (was sich auf einen <svg> Pfad bezieht), was genau das ist, woAhmad diese Reise beginnt. Aber dann untersucht er andere Optionen wie eine clevere Verwendung von mask-image und eine direkte Verwendung von SVG <mask> und <image>, was sich als Gewinner herausstellt.

Ideen wie diese finden auf seltsame Weise irgendwie ihren Weg ins kollektive Bewusstsein der Front-End-Entwickler. Jay schrieb über eine sehr ähnliche Reise, bei der er einen Ausschnitt erstellen wollte. Wieder einmal ist das Problem

clip-path definiert einen sichtbaren Bereich, was bedeutet, dass Sie, wenn Sie alles bis auf ein winziges Stück des Buttons sichtbar machen möchten, einen path oder polygon definieren müssen, der das Inverse des Originals ist. Hier ist eine Demo dessen, was ich meine, mit Clippy

Jay Freestone, „Cutouts with CSS Masks“

In diesem Fall hat polygon() Potenzial, da es % Einheiten zur Flexibilität unterstützt (verpassen Sie auch nicht Anas Idee, wo die Einheitstypen innerhalb des Polygons für ein Mischkonzept aus teilweise fest und teilweise fließend gemischt werden).

Jay kommt zu dem Schluss, dass SVG die meisten Vorteile aller Optionen hat

[…] mein Gesamteindruck ist, dass mask-composite die flexiblere Lösung bleibt, da es trivial wird, jede SVG-Form als Maske zu verwenden, nicht nur ein Dreieck oder ein einfaches Polygon. Wahrscheinlich möchten Sie einfach eine SVG exportieren und sie einfügen. Die Konstruktion des inversen Ergebnisses als clip-path wird wahrscheinlich schnell ziemlich knifflig.

Direkter Link →