Bilder in Bildbearbeitungs- und Satzprogrammen freistellen
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.
.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>
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.
- Unter bestimmten Umständen: erst wenn unter about:flags das Maskieren eingeschaltet wird.
- 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-Datei mit Bitmap-Bild und mask
<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>
SVG in HTML geladen als img-Tag
<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.