CSS Mask, shape-outside und 3D-Perspektive mit Live-Demos | We.Inc
Blende Bilder mit mask-image-Verläufen aus, schneide Formen mit SVG-Masken aus, lass Text mit shape-outside um Kreise fließen, vergleiche clip-path mit mask und baue eine 3D-Szene mit Perspektive.
Eine CSS-Maske versteckt Teile eines Elements anhand der Transparenz eines Bildes: mask-image: linear-gradient(black, transparent) blendet es nach unten hin aus. shape-outside lässt benachbarten Text um einen Kreis oder ein Polygon fließen statt um ein Rechteck. perspective auf einem Elternelement verleiht gedrehten Kindelementen echte Tiefe. Baue im Playground eine Maske und kopiere sie.
Welches Werkzeug für welche Aufgabe
Ziel
Eigenschaft
Kante
Weiches Ausblenden oder Spotlight
mask-image mit einem Verlauf
Weich, beliebige Deckkraft
Ausgeschnittene Icon- oder Logoform
mask-image mit einem SVG
Folgt dem Alphakanal des Bildes
Harter geometrischer Schnitt
Immer scharf
Text, der um eine Form fließt
shape-outside auf einem Float
Beeinflusst das Textlayout
Tiefe für 3D-Drehungen
perspective auf dem Elternelement
Überhaupt kein Schnitt
Beginne mit dem Masken-Playground: Wähle eine Ausblendung, ein Spotlight oder eine ausgeschnittene Form, bewege sie über ein Beispielbild und kopiere das CSS inklusive -webkit--Präfix. Darunter findest du bearbeitbare Beispiele für Textumfluss, clip-path im Vergleich zu mask und eine kleine 3D-Szene, alle ohne JavaScript.
Wähle einen Maskentyp: lineare Ausblendung, radiales Spotlight oder eine SVG-Form.
Passe Richtung, Position, Größe und Weichheit an. Die Vorschau aktualisiert sich sofort.
Kopiere das CSS. Es enthält sowohl mask-image als auch -webkit-mask-image, damit auch ältere Versionen von Safari und Chromium funktionieren.
Scrolle nach unten zu shape-outside, den clip-path-Vergleichen und der Perspektiv-Szene und bearbeite jedes Beispiel direkt.
Bei mask-image zählt standardmäßig nur der Alphakanal. Schwarz und jede andere deckende Farbe bedeuten sichtbar, transparent bedeutet versteckt.
Verwende mask-size, mask-position und mask-repeat genau wie die background-Eigenschaften. Eine SVG-Maske wiederholt sich, außer du setzt mask-repeat: no-repeat.
shape-outside funktioniert nur bei gefloateten Elementen. Kombiniere es mit demselben clip-path, wenn auch das Element selbst diese Form haben soll.
Ergänze shape-margin, damit umfließender Text etwas Abstand zur Kurve hält.
Häufige Fragen
Was ist der Unterschied zwischen clip-path und mask?
clip-path zeichnet eine geometrische Kontur, und alles außerhalb wird mit harter Kante abgeschnitten. mask-image nutzt ein Bild oder einen Verlauf, Kanten können also weich und teilweise transparent sein. Clip-Paths sind einfacher für Polygone und Kreise; Masken sind die Wahl für Ausblendungen, weiche Spotlights und Ausschnitte in Logoform.
Brauche ich noch -webkit-mask-image?
Die Mask-Eigenschaften ohne Präfix wurden Ende 2023 Baseline. Die -webkit--Version zusätzlich anzugeben kostet nichts und sorgt dafür, dass der Effekt auch für Besucher mit älteren Versionen von Safari und Chromium funktioniert.
Warum funktioniert mein shape-outside nicht?
Prüfe drei Dinge: Das Element muss gefloatet sein, es braucht eine Breite und Höhe, und wenn du ein Bild als Form nutzt, muss es vom selben Origin stammen oder mit CORS-Headern ausgeliefert werden. Außerdem fließt Text nur auf der Seite, die vom Float abgewandt ist.
Wie blende ich den Rand einer scrollenden Liste aus?
Setze eine Maske auf den Scroll-Container: mask-image: linear-gradient(to bottom, black 85%, transparent). Die letzten Zeilen verblassen als Hinweis, dass weiterer Inhalt folgt, und die Maske scrollt mit der Box statt mit dem Inhalt.
Welchen Wert sollte perspective haben?
Er ist der Abstand vom Betrachter zur Ebene z = 0. Etwa 600px bis 1200px wirken bei Karten natürlich. Kleinere Werte wie 300px übertreiben die Tiefe und verzerren die nahen Kanten stark.
Wie eine Maske entscheidet, was sichtbar ist
Der Browser legt das Maskenbild über das Element und liest seine Transparenz Pixel für Pixel aus. Wo die Maske vollständig deckend ist, erscheint das Element normal, wo sie vollständig transparent ist, verschwindet es, und teilweise Transparenz ergibt teilweise Sichtbarkeit.
Da Verläufe Bilder sind, ist jeder lineare, radiale oder konische Verlauf eine fertige Maske. Mehrere Masken lassen sich mit Kommas schichten und mit mask-composite kombinieren, zum Beispiel um ein Loch aus einer Ausblendung zu stanzen.
Text um Formen fließen lassen
shape-outside akzeptiert Grundformen wie circle(), ellipse(), polygon() und inset(), ein Box-Schlüsselwort wie margin-box oder ein Bild, dessen transparente Pixel die Form festlegen. Nur Inline-Inhalt, der neben dem Float fließt, folgt der Kurve.
Für sein eigenes Zeichnen belegt der Float weiterhin seine rechteckige Box. Damit ein Foto rund aussieht und zugleich Text rund verdrängt, ergänze clip-path: circle(50%) oder border-radius: 50% am selben Element.
Verlaufsmasken: Ausblendungen und Spotlights
Den unteren Teil eines Blocks ausblenden
Bis 50 Prozent der Höhe vollständig sichtbar, danach ein sanfter Übergang ins Nichts.
Radiales Spotlight
Ein radialer Verlauf hält einen weichen Kreis sichtbar und versteckt den Rest des Musters.
SVG- und Data-URI-Masken
Ein Element in Sternform ausschneiden
Das SVG ist als Data URI eingebettet, es wird also keine zusätzliche Datei gebraucht. mask-size: contain hält den ganzen Stern in der Box.
Eine Icon-Datei per Maske umfärben
Die Icon-Datei liefert nur die Form; background-color legt die Farbe fest. So bedient ein SVG jedes Theme und jeden Hover-Zustand.
shape-outside: Text, der um Formen fließt
Text um einen Kreis fließen lassen
Der Float verdrängt Text mit shape-outside und wirkt dank border-radius rund. shape-margin sorgt für Luft.
Text entlang eines diagonalen Polygons fließen lassen
Dasselbe Polygon steuert sowohl den sichtbaren Schnitt (clip-path) als auch den Textfluss (shape-outside).
clip-path im Vergleich zu mask
Derselbe Kreis, harte und weiche Kante
Links wird clip-path: circle() verwendet. Rechts eine radiale Verlaufsmaske mit weicher Kante, was clip-path nicht kann.
clip-path und mask im Vergleich
Eingabe
Grundform oder SVG <clipPath>
Beliebiges Bild: Verlauf, PNG, SVG
Kanten
Hart
Weich oder hart
Teilweise Transparenz
Nein
Ja
Animierbar
Formen mit gleicher Punktanzahl
mask-position und mask-size
Eine kleine 3D-Szene mit Perspektive
Geneigte Karten in einem gemeinsamen 3D-Raum
perspective auf der Bühne und preserve-3d auf der Gruppe setzen die drei Karten in einen Raum; translateZ schiebt jede in eine andere Tiefe.
Referenz der Mask-Eigenschaften
Einzeleigenschaften von mask und was sie tun
Eigenschaft
Standard
Zweck
Das Bild oder der Verlauf, der als Maske dient
Alpha oder Luminanz der Maske verwenden
Größe der Maske, wie background-size
Wo die Maske sitzt
Kachelung des Maskenbildes
Box, von der aus die Position gemessen wird
Bereich, den die Maske beeinflusst
Wie geschichtete Masken kombiniert werden: add, subtract, intersect, exclude
Kreis
Stern
Herz
Blob
Masken-Playground
Maskentyp
Lineare Ausblendung
Spotlight
SVG-Form
Maskiertes Element. Das Schachbrettmuster zeigt, wo es versteckt ist.