Rich Media API-Handbuch

Maskierung in HTML5

Ob eine Maskierung und welche Art jeweils verwendet wird, hängt vom Creative und dem Creative-Konzept ab.

Drei Möglichkeiten zum Erstellen von Masken

Sie können Teile des Creatives transparent gestalten. Dies ist nützlich, wenn Creatives eine Publisher-Seite überschneiden oder wenn im Creative unterschiedliche Elemente animiert werden. Es gibt drei verschiedene Möglichkeiten, um mit CSS einen Maskierungseffekt zu erzielen:

Einen genaueren Vergleich zwischen den Properties "clip-path" und "mask" finden Sie unter Clipping and Masking in CSS auf der CSS-Tricks-Website (auf Englisch).

 

Overflow:hidden

Eine Methode zum Beschneiden eines Elements ist, es in einem <div>-Tag zu verschachteln, auf das overflow:hidden angewendet wird. Diese Methode funktioniert in allen Browsern, ist aber auf die Formen beschränkt, die mit dem <div>-Tag erstellt werden können und auf die border-radius angewendet wurde.

clip-path

"clip-path" ist eine CSS-Property, die zum Definieren der Beschneidungspfade verwendet wird, die für harte (Vektor-) Kanten am besten geeignet sind. Die Beschneidungspfade hängen von einer SVG-Form ab und bieten in Bezug auf die Geometrie mehr Flexibilität. Eine Einschränkung ist dabei zu beachten. Die Property clip-path ist mit keiner Internet Explorer-Version kompatibel.

Das Definieren von Beschneidungspfaden erfordert gewisse Fachkenntnisse. Es gibt aber viele visuelle Onlinetools, z. B. Clippy, die das Erstellen sowohl einfacher als auch komplexer Formen erleichtern.

mask

Mit der mask-Property kann eine Maskierung mit der Transparenz oder Leuchtdichte eines Quellbilds erzielt werden. Die Bildmaskierung wird nur von den Webkit-Browsern (Chrome und Safari) unterstützt. Weitere Informationen zur mask-Eigenschaft

Aktuelle Informationen zur Browserkompatibilität von clip-path und mask finden Sie unter caniuse.com. Die overflow:hidden-Eigenschaft wird von allen Browsern vollständig unterstützt.

Ansatz auswählen, der für Ihre Kampagnen geeignet ist

Berücksichtigen Sie bei der Auswahl der passenden Option, dass die Unterstützung der CSS-Beschneidungsfunktion in Internet Explorer und Safari beschränkt ist:

  • Internet Explorer bietet keine Unterstützung.
  • Safari unterstützt keine SVG-Pfade. Der Browser behandelt nur Formen, die in der CSS-Deklaration enthalten sind, beispielsweise Kreise und Polygone.

Die beste Browserkompatibilität wird erzielt, wenn Sie overflow:hidden verwenden, um den Content entsprechend den Begrenzungen des übergeordneten Elements zu beschneiden. Der Nachteil ist, dass hierbei die Maskierungsform auf Rechtecke und Ellipsen (mithilfe von border-radius) beschränkt ist. Das Erfreuliche ist, dass andere wichtige Properties von "clip-path" beibehalten werden:

  • Willkürlicher DOM-Content kann beschnitten werden, einschließlich Text, Bildern, SVG und Canvas.
  • Die Maske kann animiert werden, zumindest im Bereich der Formen, auf die mit einem <div>-Tag zugegriffen werden kann.
  • Mausereignisse, die aus dem unsichtbaren Bereich stammen, werden unterdrückt. Wenn ein Teil des Elements nicht sichtbar ist, können Sie auch nicht versehentlich damit interagieren.

Allgemeine Maskierungseffekte mit einfachen Formen erstellen

Mit overflow:hidden lassen sich zwar nur einfache Maskenformen erstellen, aber Sie erzielen einige nützliche Effekte, wenn Sie die Properties der Maske animieren:

  • Animieren Sie die Breite von 0 bis zur Bildbreite, um einen Einblendungseffekt zu erzeugen. Beispiel
  • Verwenden Sie "box-shadow", um eine Maske mit abgeschrägten Kanten zu erstellen. Beispiel
  • Legen Sie einen großen Wert für "border-radius" fest und animieren Sie die Breite und Höhe, um eine kreisförmige Einblendung zu erstellen, die im Content zentriert ist. Beispiel
  • Übersetzen oder drehen Sie die Maske, um einen Spotlight-Effekt zu erzeugen. Beispiel

Masken kombinieren, um komplexe Formen zu erstellen

  • Schnittpunkt: Erstellen Sie einen Schnittpunkt, indem Sie die Maskencontainer verschachteln. Wenn sich beispielsweise ein Rechteck und ein Kreis überschneiden, können Sie daraus eine wachsende, halbrunde Maske erstellen. Beispiel
  • Vereinigung: Google Web Designer unterstützt einen Datentyp namens "Gruppe", der analog zu einem Symbol in Flash ist. Mithilfe von Gruppen können Sie getrennte Masken erstellen, die identischen Content bedecken. So kann der Anschein erweckt werden, es handele sich um eine einzelne Maske aus mehreren Teilen, obwohl jede Maske tatsächlich ein unabhängiges DOM ist. Beispiel

Über- und untergeordnete Elemente in entgegengesetzte Richtungen animieren

Ein <div>-Tag wird samt den untergeordneten Elementen animiert. Wenn Sie den Eindruck einer animierten Maske erwecken möchten, animieren Sie die untergeordneten Elemente in die entgegengesetzte Richtung, damit sie statisch erscheinen. Beispiel

Andere zu berücksichtigende Techniken

Teiltransparente Bilder einblenden

Fügen Sie ein Bild über Ihren Content ein, das dem Hintergrund im undurchsichtigen Bereich entspricht und ansonsten transparent ist. Dadurch lassen sich beliebige Formen schaffen. Sie können aber keine Masken übereinander schichten, da jede Maske den gesamten undurchlässigen Bereich übermalt und nicht selektiv im sichtbaren Bereich gerendert wird. Außerdem können Sie die Maskenform – abgesehen vom Übersetzen/Rotieren und Skalieren – nicht animieren. Beispiel

<canvas>-Element verwenden

Wenn Ihr Content sich in einem <canvas>-Element befindet, bietet dies enorme Flexibilität beim Hinzufügen von Beschneidungseffekten. Das <canvas>-Element ist jedoch nur ein schwarzer Kasten. Zur Unterstützung von Rich Content benötigen Sie daher eine umfangreiche, komplexe Laufzeit.

War das hilfreich?
Wie können wir die Seite verbessern?