CSS mask: Bilder maskieren

Bilder in Bildbearbeitungs- und Satzprogrammen freistellen

Das Maskieren oder Freistellen von Bitmap-Bildern ist ein weiterer Schritt hin zu den Funktionen der Printmedien. Auf Webseiten können sonst nur PNG-Bitmaps mit 24 Bit Farbtiefe anhand einer transparenten Maske freigestellt werden. JPEG bietet diese Möglichkeit von Haus aus nicht.

Photoshop, Illustrator, Quark und InDesign nutzen Freistellpfade oder eine Alphamaske, um Bilder nicht-destruktiv ohne Hintergrund anzuzeigen. Freistellpfade, die durch Bezierkurven (die »Feder« in Photoshop) eingesetzt werden, ziehen ein exakte Kontur rund um das Motiv. Nur der Bereich innerhalb der Kontur wird angezeigt, alles außerhalb der Kontur wird transparent.

Die Alphamaske (auch Alphakanal) ist ein Graustufenbild und setzt Motive sowohl mit einer harten als auch weichen Kontur und transparentem Hintergrund (»Vignette«) frei. Während Masken eine Art von Graustufenbild brauchen, agieren Freistellpfade auf der Basis von Vektoren oder Pfaden und bilden immer eine harte und exakte Maske.

Maskieren mit CSS mask

Auf Webseiten sorgen fast immer noch GIF- oder PNG-Bilder mit transparentem Hintergrund für Freisteller. Webkit präsentierte schon 2008 CSS mask für Alphamasken und Freisteller mit Pfaden: mask stellt Bilder anhand von PNG-Bildern, SVG-Pfaden und Verläufen frei.

.mask {
    mask-image : url(mask.png);
    // mask Kurzschrift für mask-image 
    mask: url(mask.png)
}

Die Webkit- und Blink-Browser Chrome, Safari und Opera unterstützen das Maskieren mit CSS mask, Safari allerdings nur mit webkit-Präfix. Firefox unterstützt mask seit Version 53 (2017) ohne Präfix.

Bild + Maske = Freisteller

Die Maske hier ist ein PNG-24-Format, damit der weiche Rand der Maske umgesetzt wird. Da PNG-24-Dateien groß werden, würde sich das Verfahren erst lohnen, wenn eine Maske mehrfach eingesetzt wird, aber eine weiche Maske kann deutlich kleiner angelegt werden als das Bild.

.softmask {
    mask: url('maske-soft-300.png');
    mask-size: 100%;
    -webkit-mask: url("maske-soft-300.png");
    -webkit-mask-size: 100%;
}

max-size: 100% passt die Maske an das Bild an und macht die sie responsiv.

Anstelle eines PNG-24-Bilds maskiert ein schlichte SVG-Grafik mit einem deutlich geringeren Speicherbedarf.

<svg version="1.1" viewBox="0 0 600 558" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <filter id="softcircle" >
        <feGaussianBlur stdDeviation="22"/>
    </filter>
    <circle cx="300" cy="279" r="240" fill="blue" filter="url(#softcircle)" />
</svg>

Maskieren mit Wiederholung

Wenn die Maske kleiner als das Bild ist, wird sie wie ein Hintergrundbild wiederholt.

.imask {
   mask-image: url(mask.png);
}

Ansonsten lassen sich Wiederholungen mit mask-repeat steuern.

mask-repeat: repeat-x;
mask-repeat: repeat-y;
mask-repeat: repeat;
mask-repeat: space;
mask-repeat: round;
mask-repeat: no-repeat;

CSS mask mit Verlauf

Als Maske kann anstelle eines Bildes ein Verlauf – linear Gradient oder radial Gradient – eingesetzt werden.

Wer hat die Erdbeeren genascht?

.radial {
    mask: radial-gradient( black 40%, transparent 70%);
}
.linear {
    mask: linear-gradient( to top, black 40%, transparent 70%);
}

Die Farbe des Verlaufs spielt bei allen Spielarten der Maskierung keine Rolle. Ob rot, weiß oder schwarz, entscheidend sind Deckkraft und Transparenz.

Text-Masken für Bilder

Text kann ebenfalls als Maske verwendet werden – das Verfahren nutzt die CSS-Eigenschaft background-clip.

.tmask {
    font-size: calc(64px + 100 * (100vw - 300px) / 1260);
    background: url(garten.jpg);
    -webkit-background-clip: text;
    color: transparent;
}
<div class="tmask">Garten</div>

Am Rande: Schriftgröße mit vw an den ViewPort anpassen

Text maskieren

So ziemlich alle HTML-Elemente können mit CSS mask-image maskiert werden – Text genauso wie das Video.

Auf Browser, die mask nicht unterstützen, wirken sich die Masken nicht aus: Bilder und Videos werden weiterhin angezeigt, wenn auch ohne Alphamaske.

.twitter {
    -webkit-mask: url(twitter.svg);
    mask-image: url(twitter.svg)
}

CSS shape-outside kann ein Bild vom Text umfließen lassen – anhand einer Alpha-Maske oder einer einfachen Form. CSS shapes werden allerdings ebenfalls von IE11 und EDGE nicht unterstützt.

Browser Support für mask und clip-path

Die übliche Frage an dieser Stelle lauten: Wann können diese Eigenschaft tatsächlich konsistent genutzt werden? Bis auf IE11 sind jetzt die Mainstream-Browser in der Spur. IE11 zeigt ein maskiertes Bild schlichtweg ohne Maske.

Microsoft EDGE beherrscht tatsächlich theoretisch in einem gewissen Umfang unter bestimmten Umständen Maskieren mit CSS: Die Abfrage mit @supports bestätigt, dass Edge (seit Nov 2018) den Anschluss gefunden hat.

@supports(mask: url("")) {}

Soweit zur Theorie.

1. Unter bestimmten Umständen: erst wenn unter about:flags das Maskieren eingeschaltet wird.
2. Und in gewissen Umfang: nicht die Kurzschrift mask, sondern nur mask-image.

CSS clip-path – Freistellen mit harter Kante – wird zwar von allen Browsern außer IE und Microsoft Edge unterstützt, aber ist nur in der URL-Variante halbwegs zuverläßig.

Fazit: An und für sich sind CSS-Masken super, aber durch den lückenhaften Browser-Support immer noch ein Dschungel. Wer sich an SVG wagt: SVG unterstützt sowohl weiche als auch exakte Masken (äquivalent zum Freistellpfad aus Photoshop). SVG clipPath und SVG mask setzen in allen modernen Browsern Bitmap-Bilder und Grafiken zuverlässig frei.

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 860 435" height="100%" width="100%">
<mask id="cup" >
    <path style="fill:#fff" d="m 770.1,30.42 c -23.4,1.87 -56.1,3.3 -82.4,42.71 -1.3,-10.24 …" />
</mask>
<image mask="url(#cup)" y="0" x="0" xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZ… 2Q==" height="435" width="860" />
</svg>

<img src="tartufo.svg" alt="SVG mask" />

mask und path beim W3C

Das W3C hat seit 2012 eine Reihe von Empfehlungen und Drafts in die Wege geleitet.

• Compositing and Blending Level 1
  W3C Candidate Recommendation, 13 January 2015 und
• CSS Exclusions Module Level 1
  Editor’s Draft, 17 July 2016
• CSS Masking Module Level 1
  Editor’s Draft, 25 April 2016

CSS Compositing and Blending überblendet Bilder wie der Füllmodus für Ebenen in Photoshop (Normal, Multiplizieren, Weiches Licht, Hartes Licht, Differenz … die ganze Palette). Exclusions and Shapes Module Level beschreibt das Umfließen von Elementen durch Inline-Inhalte. CSS Masking beschreibt Masken und Freistellpfade.