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
  • Leer

Details: caniuse.com

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



Inhaltsverzeichnis

[Bearbeiten] mask

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

  • Chrome
  • Leer
  • Leer
  • Opera
  • Leer

ToDo (weitere ToDos)

Live-Beispiele, wenn die Browserunterstützung besser ist. --Matthias Scharwies (Diskussion) 07:32, 19. Dez. 2015 (CET)

[Bearbeiten] 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
Beispiel folgt

[Bearbeiten] mask-clip

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.


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

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

  • 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.



[Bearbeiten] Browsersupport

Achtung!

Die Eigenschaft mask ist derzeit (Stand Januar 2016) nur in den Browser Firefox (und dort nur für das Referenzieren von SVG-Masken) 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.


[Bearbeiten] Quellen

  1. W3C: Masking

[Bearbeiten] Weblinks

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML