CSS/Eigenschaften/Anzeige/mask

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]

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari

Details: caniuse.com

Der Titel dieses Artikels ist mehrdeutig. Das gleichnamige SVG-Element finden Sie unter: SVG/Masken.


ToDo (weitere ToDos)

Live-Beispiele gesucht, da die Browserunterstützung bis auf IE schon vorhanden ist. --Matthias Scharwies (Diskussion) 07:32, 27. Mai. 2017 (CET)

mask[Bearbeiten]

Die Eigenschaft mask ist eine Zusammenfassung der möglichen Einzelangaben mask-origin, mask-clip und mask-border.

  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari


mask-origin[Bearbeiten]

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
Beispiel folgt

mask-clip[Bearbeiten]

Die Eigenschaft mask-clip legt die Position des zu maskierenden Elements (mask painting 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.


mask-border[Bearbeiten]

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-source[Bearbeiten]

mask-border-slice[Bearbeiten]

mask-border-width[Bearbeiten]

mask-border-outset[Bearbeiten]

mask-border-repeat[Bearbeiten]

mask-border-mode[Bearbeiten]

Referenzieren einer Maske[Bearbeiten]

  • Leer
  • Firefox
  • Leer
  • Leer
  • Leer

Details: caniuse.com

Beispiel
#maske {
  mask: url(maske.svg#stern);
}

Dieses Beispiel funktioniert (Stand Januar 2016) in den Webkit-Browsern nicht, da diese noch keine Masken in externen SVG-Elementen unterstützen.



Browsersupport[Bearbeiten]

Achtung!

Die Eigenschaft mask ist derzeit (Stand Mai 2017) nur in den Browser Firefox implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

für Chrome, 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[Bearbeiten]

  1. W3C: Masking

Weblinks[Bearbeiten]