CSS/Tutorials/Masken und Beschneidungen/Masken

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

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

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.

Beispiele für maskierte Bilder ansehen …
.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;
}
ansehen …

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.


mask-border vs. -webkit-box-image ansehen …
.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;
}
ansehen …

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: 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 keine viewBox festgelegt ist, wird die nächstgelegene Viewbox verwendet. Falls eine ViewBox festgelegt ist, wird das Koordinatensystem dieser ViewBox verwendet.
Beispiel 
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 keine viewBox 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.

Beispiele für maskierte Bilder ansehen …
.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;
}
ansehen …

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
Referenzieren eines SVG-Fragments als Schablone ansehen …
<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>
ansehen …

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!

Die Eigenschaft 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-...
Hinweis:
Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.

Quellen

  1. ↑ W3C: Masking

Weblinks


Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Masken_und_Beschneidungen/Masken&oldid=90032“