CSS-Maskierung

Optional Advanced hat gerade Zeitungsspalten gegossen. Diese Session ist ein anderes optionales Werkzeug: Maskierung. Du legst eine Schablone auf eine Box. Wo die Schablone voll ist, siehst du Foto oder Farbe. Wo sie leer ist, verschwindet die Box. Du zerteilst keinen Artikel in Ströme und schiebst keine Icon-Kacheln auf einem Sprite-Sheet.

Direkte Antwort

CSS-Maskierung blendet Teile eines Elements mit mask-image aus — PNG, SVG oder Verlauf. Denk an Sprühfarbe durch einen Ausschnitt. mask-size, mask-repeat und mask-position arbeiten wie die Hintergrund-Schicht: cover, no-repeat, center. mask-mode wählt Alpha (Transparenz der Maskendatei) oder Luminanz (hell gegen dunkel). Nutze eine Maske, wenn die Kante ausfaden soll. Nutze clip-path für einen harten Kreis oder ein Polygon. Labels und Buttons bleiben vollständig sichtbar.

Warum eine Maske keine Spalte und kein Sprite ist

Mehrspalten fragmentiert einen Textstrom. Ein Sprite-Sheet beschneidet eine Bitmap mit background-position, damit viele Icons eine Datei teilen. Eine Maske macht keines von beiden. Das Element behält seine Box. Layout-Breite und -Höhe schrumpfen nicht. Du änderst nur, welche Pixel dieser Box gemalt werden. Filter (blur(), grayscale()) ändern das Aussehen sichtbarer Pixel; eine Maske entscheidet, welche Pixel bleiben.

PNG als Schablone

mask-image nimmt url(...) wie background-image. Ein typisches Masken-PNG ist weiß (oder deckend), wo das Foto bleiben soll, und transparent, wo ein Loch sein soll:

Das Foto bleibt Hintergrund (oder ein <img> mit derselben Maske). Das Blob-PNG ist nur die Schablone. Fehlt die Maskendatei, kann das ganze Element verschwinden — halte einen unmaskierten Fallback bereit oder teste die URL.

Verlauf zum Ausfaden

Du brauchst keine zweite Bilddatei. Eine Verlaufsmaske ist das alltägliche Fade am Kartenfuß:

Schwarz (oder voll deckend) hält den Inhalt; transparent stanzt ein Loch. Der Verlauf lebt in CSS, also kein extra HTTP-Request — anders als ein Icon-Sprite-Sheet. Das ist nicht opacity auf der ganzen Karte: Text im soliden Teil bleibt scharf; nur der maskierte Bereich löst sich auf.

Größe, Repeat, Position

Behandle die Maske wie eine Hintergrundschicht, die du nie als Bild siehst:

mask-size: cover füllt die Box; contain hält das Seitenverhältnis der Schablone; Längen pinnen eine kleine Form. repeat kachelt die Schablone (selten, schnell zu viel). Die Kurzform mask gibt es, aber Anfänger bleiben bei Longhands, bis sich die Schicht wie background anfühlt.

Alpha gegen Luminanz

mask-mode antwortet: „Lese ich Transparenz oder Helligkeit?“

alpha (oft Standard bei PNG mit Transparenz) nutzt den Alpha-Kanal. luminance nutzt hell gegen dunkel: Weiß zeigt typisch, Schwarz verbirgt — nützlich, wenn die Schablone ein Graufoto ist, kein transparentes PNG. Tut eine JPEG-Maske „nichts“, brauchtest du wahrscheinlich luminance. Auf SVG-<mask> gibt es mask-type; auf HTML-Boxen starte mit mask-mode.

Harter Clip gegen weiche Maske

clip-path schneidet eine Geometrie: Kreis, inset, Polygon. Die Kante ist scharf. Eine Maske kann weich sein. Das sind nicht zwei Namen für eine Eigenschaft:

Avatare und Tickets wollen oft clip-path. Hero-Poster, die in die Seite auflösen, wollen eine Verlaufs-maske. Kombinieren geht, aber eine Aufgabe pro Eigenschaft ist ruhiger. overflow: hidden mit border-radius ist Werkzeug drei: es clippt Nachfahren an die Padding-Box. Eine Maske malt das Element selbst inklusive Hintergrund, ohne die Layout-Box rund zu machen.

Safari und das WebKit-Präfix

Manche Safari-Versionen wollen noch -webkit-mask-image (und Freunde) neben den Standard-Eigenschaften:

Präfix-Zeile und Standard-Zeile. Nicht für immer nur Präfix liefern. @supports kann Extras umschließen; die Gewohnheit: das Fade in Safari testen, nicht nur in Chromium.

Maske vs Clip vs Overflow vs Sprites

Optional Advanced nutzte Sprites für Icons und Spalten für Fließtext. Maskierung ist die Schablone. Alle drei auf demselben Hero: ein Foto, das wie ein Sprite beschnitten und wie eine Spalte zerschnitten wirkt.

Was du nicht maskieren sollst

Nutze keine Maske, um ein unordentliches Layout zu „retten“. Liegt ein Button oder Label unter dem Fade, kann niemand lesen oder tippen. Screenreader können den Text noch ansagen, während Sehende nichts sehen — das ist ein Bug, kein Feature. Kontrast zählt im sichtbaren Teil. Dekorative Fotos, Karten und Icons sind übliche Ziele; Login-Felder nicht.

Steht ein Kind aus der Karte, ist overflow (oder ein kleineres Kind) der Layout-Fix. Sind es zwölf HTTP-Icon-Dateien, ist ein Sprite oder SVG-Set der Asset-Fix. Maskierung ersetzt keines von beiden.

Selbst ausprobieren

1. Gib einer Farbbox mask-image: linear-gradient(to bottom, #000 50%, transparent) und sieh den Fuß auflösen.
2. Tausche eine kleine SVG- oder PNG-Schablone; setze mask-size und mask-position: center.
3. Vergleiche mask-mode: luminance auf einem Graustufen-JPEG mit alpha auf einem transparenten PNG.
4. Dieselben Kreis mit clip-path: circle(50%) — merke die harte Kante.
5. Ergänze -webkit-mask-image mit demselben Verlauf. Maskiere kein Formular.

Typische Fehler

• Maske als Seitenlayout oder als overflow: hidden
• mask-size vergessen, sodass eine Mini-Schablone in der Ecke sitzt
• Löcher von einer JPEG-Maske ohne mask-mode: luminance erwarten
• -webkit-mask-image weglassen und „CSS-Masken“ in Safari beschuldigen
• clip-path und mask-image gleichsetzen
• Labels, Bildtexte oder Buttons maskieren, bis Kontrast und Klickflächen sterben
• Verwechslung mit Sprites (Kachel-Offsets) oder Mehrspalten (Textströme)

Zusammenfassung

• Eine Maske ist eine Schablone auf einem Element: hier zeigen, dort verbergen
• mask-image nimmt URL oder Verlauf; Größe, Repeat und Position spiegeln Hintergründe
• mask-mode: Alpha gegen Luminanz
• clip-path ist ein harter geometrischer Schnitt; Masken können faden
• Präfix für Safari; nie essenzielle UI wegmaskieren
• Optional Advanced geht als Nächstes mit Benutzeroberfläche (user-interface) weiter