CSS/Tutorials/Masken und Beschneidungen/Masken
Mit der CSS-Eigenschaft mask können Sie eine Schablone anlegen, die dann nur Teilbereiche einer beliebigen Form oder Grafik teilweise oder ganz sichtbar macht.[1] Anders als bei clip-path sind dabei auch weiche Übergänge möglich.
Kurz: Masken sind Grafiken; Beschneidungen aber Pfade.
- Browserunterstützung
- caniuse.com
Inhaltsverzeichnis
mask
Die Eigenschaft mask ist eine Zusammenfassung der möglichen Einzelangaben mask-image, mask-origin, mask-clip und mask-border.
mask-image
Die Eigenschaft mask-image referenziert die Grafik, die als Schablone oder Maske über ein HTML-Element gelegt wird. Wie bei background-image kann dies eine externe Gafik oder ein Verlauf sein.
.linear {
-webkit-mask-image: linear-gradient(transparent, black);
mask-image: linear-gradient(transparent, black);
}
.radial {
-webkit-mask: radial-gradient( black 40%, transparent 70%);
mask: radial-gradient( black 40%, transparent 70%);
}
.radial2 {
-webkit-mask-image: radial-gradient(circle at 50% 30%, black 50%, rgba(0, 0, 0, 0.6) 50%);
mask-image: radial-gradient(circle at 50% 37%, black 48%, rgba(0, 0, 0, 0.6) 48%);
}
img:hover {
-webkit-mask: none;
mask: none;
}
Im ersten Beispiel wurde der lineare Verlauf mit mask-image
, im zweiten mit der zusammenfassenden Eigenschaft mask
notiert.
CSS-Maskierungen werden von allen modernen Browsern unterstützt, es muss jedoch zusätzlich noch der Browser-Präfix -webkit- verwendet werden.
mask-border
Die Eigenschaft mask-border ist eine Zusammenfassung der möglichen Einzelangaben mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat und mask-border-mode.
.stamptiles {
mask: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg');
-webkit-mask-box-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
mask-box-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
mask-border: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
}
.stamptiles2 {
mask: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg');
-webkit-mask-box-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
mask-box-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
mask-border: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
webkit-mask-size:100%;
mask-size:100%;
}
.perforated { /*works only in webkit-Browsers */
-webkit-mask-box-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/stampTiles.svg') 30 repeat;
}
Dieses Beispiel vergleicht die mask-border
-Eigenschaft mit der nicht-standardisierten -webkit-box-image
-Eigenschaft. In den Webkit-Browsern wird der Rand durch die Maske perforiert. Im Firefox erstrecken sich die Perforationen über das gesamte Bild. Im mittleren Bild sorgt mask-size: 100% für Abhilfe – die Perforation ist im Firefox nun aber riesig!
mask-origin
Die Eigenschaft mask-origin legt die Position der Geometrie-Box der Maske (mask positioning area) fest.
Wenn das zu maskierende Element ein HTML-Element ist, sind folgende Schlüsselwerte möglich:
margin-box
border-box
: Standardwertpadding-box
content-box
Wenn die Grundformen mit mask auf ein SVG-Element angewandt werden, kann die Geometrie-Box folgende Werte annehmen:
fill-box
stroke-box
view-box
– falls keineviewBox
festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.
Beispiel folgt
mask-clip
Die Eigenschaft mask-clip legt die Position des zu maskierenden Elements (mask painting area) fest.
- Browserunterstützung
- caniuse.com
Wenn das zu maskierende Element ein HTML-Element ist, sind folgende Schlüsselwerte möglich:
-
margin-box
-
border-box
: Standardwert -
padding-box
-
content-box
Wenn die Grundformen mit mask auf ein SVG-Element angewandt werden, kann die Geometrie-Box folgende Werte annehmen:
fill-box
stroke-box
view-box
– falls keineviewBox
festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.
mask-size
Sie können Masken mithilfe der Eigenschaft mask-size skalieren.
Erlaubt sind dabei die Schlüsselwörter:
-
auto
, Voreinstellung übernimmt die Maße der Grafik, keine Skalierung -
contain
, passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein -
cover
, passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches - ein Paar Längenangaben
Die erste Angabe spezifiziert die gewünschte Breite, die zweite entsprechend die Höhe der Maske. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.
.umriss {
-webkit-mask: url(https://wiki.selfhtml.org/images/5/56/Deutschland-Umriss.svg#maskelement);
-webkit-mask-size: 95%;
-webkit-mask-repeat: no-repeat;
mask-image: url(https://wiki.selfhtml.org/images/5/56/Deutschland-Umriss.svg#maskelement);
mask-size: 50%;
mask-repeat: no-repeat;
}
Das Beispiel erhält eine Grafik mit einer Maske und einem Schieberegler input type="range". Mit ihm können Sie den Wert für mask-size und so die Größe der Schablone verändern.
Referenzieren einer Maske
Das Referenzieren von externen Grafiken als Schablone hat Nachteile: neben der Dateigröße wird ein zusätzlicher HTTP-Request nötig. Besser wäre es wie bei den Verläufen im ersten Beispiel unsere Schablone mit SVG direkt im HTML-Dokument zu notieren:
- Browserunterstützung
- caniuse.com
<style>
.bubbles1 {
-webkit-mask-image: url(#mask1);
mask-image: url(#mask1);
mask-size:100%
}
</style>
...
<svg width="0" height="0" viewBox="0 0 450 450">
<defs>
<mask id="mask1">
<rect fill="black" x="0" y="0" width="450" height="450" />
<circle fill="#FFFFFF" r="50" />
<circle fill="#FFFFFF" cx="125" cy="125" r="100" />
<circle fill="#FFFFFF" cx="225" cy="300" r="100" />
<circle fill="#FFFFFF" cx="350" cy="50" r="90" />
<circle fill="#FFFFFF" cx="100" cy="400" r="100" />
<circle fill="#FFFFFF" cx="400" cy="400" r="100" />
</mask>
</defs>
</svg>
Das Referenzieren einer SVG-Fragments funktioniert (Stand: Mai 2023) nur im Firefox. Um solche Effekte auch in anderen Browsern zu ermöglichen, muss die SVG-Grafik als eigenes Dokument abgespeichert und dann extern referenziert werden.
Browser-Support
Achtung!
mask
ist derzeit (Stand: Mai 2023) nur in die Browser Firefox und Edge implementiert, deshalb muss man proprietäre Eigenschaften verwenden.
für Chrome, Edge, Opera und Safari
-
-webkit-mask-...
Quellen
Weblinks
- W3C: CSS Masking Module Level 1 (Candidate Recommendation, 26 August 2014, immer neueste Version)
- MDN: Mask
- html5rocks: CSS Masking
- codepen: viele anschauliche Beispiele von Yoksel
- css-tricks: Clipping and Masking in CSS (von 2016)
- Apply effects to images with CSS's mask-image property von Rachel Andrew
- mediaevent: CSS mask: Bilder maskieren