Masken

Eine Maske blendet einen Teil eines Hostelements mithilfe von Form- oder Transparenzebenen aus. Hostelemente können Bilder, Divs, Textcontainer und Komponenten sein.

Jedes Element kann nur eine einzige Maske haben. Sie haben aber die Möglichkeit, Masken in Ebenen übereinanderzuschichten, indem Sie das Hostelement in ein Div-Element verpacken und eine Maske auf das Div-Element des Containers anwenden. Sie können auch ein anderes Element in dem Hostelement verschachteln und dem untergeordneten Element eine Maske zuweisen.

Arten von Masken

Bildmaske
Farbverlaufsmaske
"clip path"-Maske

Browserkompatibilität

In Microsoft Edge ab Version 40 werden nur rechteckige „clip path“-Masken unterstützt. Alle anderen Maskentypen und -formen werden ignoriert.

Bildmaske

Bei Bildmasken wird mithilfe der transparenten Bereiche eines Bildes das Hostelement ausgeblendet.

So fügen Sie eine Bildmaske hinzu:

Klicken Sie mit der rechten Maustaste auf das Element, das Sie maskieren möchten.
Wählen Sie aus dem Pop-up-Menü die Option Bildmaske hinzufügen... aus.
Importieren Sie das Bild, das als Maske verwendet werden soll, oder wählen Sie es aus.

Sie können die Größe und Position der Maske mit dem Auswahltool oder im Steuerfeld "Eigenschaften" ändern.

Hinweis: Für Bildmasken kann keine prozentbasierte Positionierung verwendet werden.

Farbverlaufsmaske

Bei Farbverlaufsmasken wird das Hostelement durch die Abstufung des Transparenzgrads ausgeblendet.

Google Web Designer unterstützt beide Arten von Farbverläufen für Masken:

Linearer Farbverlauf
Radialer Farbverlauf

So fügen Sie eine Farbverlaufsmaske hinzu:

Klicken Sie mit der rechten Maustaste auf das Element, das Sie maskieren möchten.
Wählen Sie aus dem Pop-up-Menü die Option Farbverlaufsmaske hinzufügen aus.
Klicken Sie im Steuerfeld "Eigenschaften" auf das Farbverlaufsmuster, um den Farbverlaufstyp, die Farben, die Durchlässigkeit und – bei linearen Farbverläufen – den Winkel anzupassen.

Standardmäßig hat die Farbverlaufsmaske die gleiche Größe wie das Hostelement. Sie können aber die Positions- und Größeneigenschaften der Maske mit dem Auswahltool oder im Steuerfeld "Eigenschaften" anpassen.

Hinweis: Für Farbverlaufsmasken kann keine prozentbasierte Positionierung verwendet werden.

"clip path"-Masken

Bei "clip path"-Masken wird mithilfe einer geometrischen Form festgelegt, welcher Teil des Hostelements gezeigt werden soll.

Sie können die Maskenform auswählen, indem Sie in der Symbolleiste auf das "clip path"-Maskentool klicken und die Maustaste gedrückt halten, bis ein Pop-up-Menü erscheint:

Rechteckige Maske (Standard)
Ovale Maske
Polygonmaske

Browserkompatibilität

Internet Explorer und Microsoft Edge unterstützen nur "clip-path"-Masken in rechteckigen Formen, bei denen Position und Größe in Pixeln angegeben sind. Prozentbasierte Masken und andere Maskenformen, einschließlich abgerundeter Ecken bei rechteckigen Masken, werden ignoriert.
In Firefox und Safari werden rechteckige Masken mit abgerundeten Ecken und hohen Werten für den Eckenradius (relativ zu den Maskenabmessungen) möglicherweise nicht korrekt gerendert.
Safari unterstützt keine "clip path"-Masken bei Formen, die mit dem Rechtecktool gezeichnet wurden. Verwenden Sie als Problemumgehung ein div-Element anstelle einer Rechteckform und platzieren Sie die Maske auf dem div-Element.
In Chrome und Opera werden "clip path"-Masken falsch gerendert, wenn das Hostelement ein 3D-transformiertes untergeordnetes Element enthält.
Rechteckige Masken mit abgerundeten Ecken, die mit einem prozentbasierten Radius festgelegt wurden, können in verschiedenen Browsern ein wenig unterschiedlich gerendert werden.

So fügen Sie eine "clip path"-Maske hinzu:

Wählen Sie das Element aus, das Sie maskieren möchten.
Wählen Sie das Maskentool für die gewünschte Form aus.
Legen Sie zusätzliche Optionen für die Maskenform fest.
- Nur rechteckige Masken: Legen Sie für abgerundete Ecken den Eckenradius oben in der Leiste mit den Tooloptionen fest. Verwenden Sie die Schaltfläche Identisch halten , um bei allen vier Ecken denselben Radius anzuwenden.
- Nur Polygonmasken: Wählen Sie oben in der Leiste mit den Tooloptionen die gewünschte Form aus. Verwenden Sie die Option Freies Format, um eine beliebige Form zu zeichnen. Wenn Sie die Option Regelmäßiges Polygon auswählen, geben Sie die Anzahl der gewünschten Polygonseiten ein.
Zeichnen Sie die Maske über dem Hostelement.
- Halten Sie beim Zeichnen die Umschalttaste gedrückt, damit Breite und Höhe der gezeichneten Maske identisch sind. Die Umschalttaste hat keine Auswirkungen bei Masken mit freiem Format und bei bestimmten vordefinierten Formen. Letztere werden stattdessen immer mit gleich langen Seiten gezeichnet, z. B. Dreiecke, Rauten, Fünfecke, Sechsecke und Sterne.
- Halten Sie die Alt-Taste gedrückt, um beim Zeichnen die Ausgangsposition als Mittelpunkt der Maske zu verwenden.

Hinweis: Nachdem Sie eine Polygonmaske gezeichnet haben, können Sie die Maskenform ändern, indem Sie die Eckpunkte ziehen. Die Anzahl der Seiten lässt sich jedoch nicht mehr ändern.

Formen für Polygonmasken

	Freies Format (selbst gezeichnete Form)
	Regelmäßiges Polygon (Anzahl der Seiten festlegen; Seiten werden mit identischer Länge gezeichnet)
	Dreieck
	Rechteck
	Frame
	Raute
	Fünfeck
	Sechseck
	Nach rechts zeigende spitze Klammer
	Nach links zeigende spitze Klammer
	Auf der Achse
	Stern
	Rechtspfeil
	Linkspfeil

Masken auswählen

Im Anzeigebereich: Wählen Sie das Hostelement aus und klicken Sie dann auf die Maske. Die Maske wird grün umrandet dargestellt.
Auf der Zeitachse im erweiterten Modus: Wählen Sie die Maskenebene unterhalb der Ebene des Hostelements aus. Maskenebenen werden durch das Symbol vor dem Namen der Ebene gekennzeichnet.

Sie können Maskenebenen auf der Zeitachse im erweiterten Modus ausblenden und sperren, um das Arbeiten mit den Hostelementen zu vereinfachen.

Mehrere Masken auswählen

Wenn Sie mehrere Maskenebenen gleichzeitig löschen möchten, klicken Sie im erweiterten Modus auf der Zeitachse bei gedrückter Strg-Taste auf die entsprechenden Maskenebenen. Die Bearbeitung von Ebenen ist nur nacheinander möglich.

Sie können eine Kombination aus Elementen und Masken nur dann löschen, wenn die Hostelemente für die Masken in der Auswahl enthalten sind.

Masken bearbeiten

Sie können Masken direkt im Anzeigebereich oder über den Eigenschaftenbereich bearbeiten. CSS-Eigenschaften für Masken sind im CSS-Steuerfeld nicht verfügbar.

Sie haben folgende Bearbeitungsmöglichkeiten:

Maske ausschneiden, kopieren und einfügen
Maske verschieben
Größe einer Maske anpassen
Maske drehen
Quelle einer Bildmaske ändern
Farbverlauf einer Farbverlaufsmaske ändern
Krümmung der Ecken einer rechteckigen Maske ändern
Form einer Polygonmaske ändern

Maske ausschneiden, kopieren und einfügen

Mit einer der folgenden Methoden können Sie eine Maske ausschneiden oder kopieren und in ein anderes Element oder Dokument einfügen:

Im Anzeigebereich oder auf der Zeitachse im erweiterten Modus:
- Klicken Sie mit der rechten Maustaste auf die Maske und wählen Sie Ausschneiden oder Kopieren aus.
- Klicken Sie mit der rechten Maustaste auf das Element, das Sie maskieren möchten, und wählen Sie Einfügen oder Maske ersetzen aus.
Auf der Zeitachse im erweiterten Modus:
- Ziehen Sie die Maskenebene auf eine Elementebene, um der Maske ein anderes Hostelement zuzuordnen. Das ist jedoch nicht möglich, wenn Sie eine Maske ersetzen möchten.
- Halten Sie die Alt-Taste gedrückt, während Sie eine Maskenebene ziehen, um die Maske in ein anderes Element zu kopieren. Das ist jedoch nicht möglich, wenn Sie eine Maske ersetzen möchten.
Tastenkombinationen:
- Ausschneiden: Strg + X (Windows) oder ⌘ + X (Mac)
- Kopieren: Strg + C (Windows) oder ⌘ + C (Mac)
- Einfügen: Strg + V (Windows) oder ⌘ + V (Mac)
Menübefehle:
- Bearbeiten > Ausschneiden
- Bearbeiten > Kopieren
- Bearbeiten > Einfügen oder Maske ersetzen

Alle Maskenanimationen werden ebenfalls eingefügt.

Einschränkungen beim Kopieren und Einfügen von Masken

Sie können nur eine einzelne Maske zum Ausschneiden oder Kopieren und nur ein einzelnes Element zum Einfügen der Maske auswählen.
Wenn Sie eine Maske in ein Element einfügen, das bereits eine Maske hat, wird die vorhandene Maske ersetzt.
Masken können nicht in Medienregeln ausgeschnitten, kopiert oder eingefügt werden.

Maske verschieben

Wählen Sie die Maske aus, die Sie verschieben möchten, und verwenden Sie danach eine der folgenden Methoden:

Bearbeiten Sie im Steuerfeld Eigenschaften die Eigenschaften der oberen und linken Position. Diese Werte beziehen sich auf die obere linke Ecke des Hostelements.
Verwenden Sie die Pfeiltasten, um die Ebene Pixel für Pixel zu verschieben. Halten Sie die Umschalttaste gedrückt, während Sie die Pfeiltaste betätigen, um die Maske um 10 Pixel zu verschieben.
Verwenden Sie das Auswahltool , um die Maske mit der Maus zu ziehen. Halten Sie beim Ziehen die Umschalttaste gedrückt, um die Maske nur entlang einer Achse zu verschieben.

Masken können außerhalb der Grenzen ihres Hostelements positioniert werden.

Hinweis: Für Bild- und Farbverlaufsmasken kann keine prozentbasierte Positionierung verwendet werden.

Größe einer Maske anpassen

Wählen Sie die Maske aus, deren Größe Sie anpassen möchten, und gehen Sie dann so vor:

Bearbeiten Sie die Eigenschaften für Breite und Höhe im Steuerfeld Eigenschaften.
Wählen Sie das Auswahltool aus und aktivieren Sie oben in der Leiste mit den Tooloptionen die Option Bearbeitungsmodus.
Halten Sie beim Ziehen die Umschalttaste gedrückt, wenn das ursprüngliche Seitenverhältnis erhalten bleiben soll.
Halten Sie beim Ziehen die Alt-Taste (Windows) bzw. Wahltaste (Mac) gedrückt, um die Maskengröße anzupassen, ohne den Mittelpunkt zu ändern.

Maske drehen

Masken können nicht direkt rotiert werden. Derselbe Effekt lässt sich aber erzielen, wenn Sie vor dem Hinzufügen der Maske die folgenden Schritte ausführen:

Verpacken Sie das Element, das Sie maskieren möchten.
Fügen Sie die Maske dem Container-Div hinzu.
Drehen Sie das Container-Div, dreht die Maske sich mit.
Drehen Sie das ursprüngliche Element in die entgegengesetzte Richtung.

Quelle einer Bildmaske ändern

So tauschen Sie ein Bild aus, das für eine Bildmaske verwendet wird:

Wählen Sie die Maske aus.
Klicken Sie im Steuerfeld Eigenschaften im Feld Quelle auf die Schaltfläche Bildmaske festlegen.
Wählen Sie ein Bild aus der Bibliothek aus oder klicken Sie auf die Schaltfläche Assets importieren , um ein anderes Bild zu verwenden.
Klicken Sie auf OK.

Farbverlauf einer Farbverlaufsmaske ändern

So passen Sie den Farbverlauf einer Farbverlaufsmaske an:

Wählen Sie die Maske aus.
Klicken Sie im Steuerfeld Eigenschaften auf das Farbverlaufsmuster.
Bearbeiten Sie den Farbverlauf:
- Art des Farbverlaufs: Wählen Sie die Schaltfläche Linearer Farbverlauf oder Radialer Farbverlauf aus.
- Übergangsstrecke: Ziehen Sie oben auf der Farbverlaufsleiste eine Transparenzmarkierung entlang, um die Übergangsstrecke zu ändern.
- Transparenz: Mit Transparenzmarkierungen legen Sie die Deckkraft an einem bestimmten Punkt entlang des Farbverlaufs fest. 100 % bedeutet, dass das Hostelement vollständig sichtbar ist. Bei 0 % ist es vollständig ausgeblendet. Klicken Sie auf eine Transparenzmarkierung, um ihre Deckkraft im Feld für den Prozentsatz (rechts) zu bearbeiten.
- Zusätzliche Transparenzmarkierungen: Klicken Sie auf die Farbverlaufsleiste, um weitere Transparenzmarkierungen zu setzen. Wenn Sie eine Transparenzmarkierung entfernen möchten, ziehen Sie sie nach unten.
- Winkel: Bei linearen Farbverläufen können Sie den Winkel anpassen.
- Standard: Wenn Sie den Farbverlauf auf die Standardeinstellungen (einen linearen Farbverlauf von 0 % bis 100 % und 90 Grad) zurücksetzen möchten, klicken Sie auf die Schaltfläche Standard-Farbverlauf .

Krümmung der Ecken einer rechteckigen Maske ändern

Sie können bei einer rechteckigen Maske rechtwinklige oder abgerundete Ecken verwenden und den Krümmungsradius abgerundeter Ecken anpassen.

Wählen Sie die Maske aus.
Geben Sie im Steuerfeld Eigenschaften den Eckenradius entweder in Pixeln oder als Prozentsatz an. Wenn Sie den Radius auf 0 setzen, sind die Ecken rechtwinklig.
Falls die Schaltfläche Identisch halten aktiviert ist, gilt für alle vier Ecken derselbe Wert. Deaktivieren Sie die Schaltfläche , um jede Ecke separat festzulegen.

Form einer Polygonmaske ändern

So passen Sie im Anzeigebereich die Form einer Polygonmaske an:

Wählen Sie die Maske aus.
Wählen Sie in der Symbolleiste das Tool Polygonmaske aus. An jedem Scheitelpunkt werden Ziehpunkte angezeigt.
Ziehen Sie die Eckpunkte an die gewünschte Position.
- Halten Sie beim Ziehen die Umschalttaste gedrückt, um den Eckpunkt nur entlang einer vertikalen oder horizontalen Achse zu verschieben.

Hinweis: Die Anzahl der Seiten einer vorhandenen Polygonmaske kann nicht geändert werden.

Masken animieren

Sie können die Größe und Position einer Maske animieren. Mit Sichtbarkeitsbereichen können Sie festlegen, wann eine Maske ein- oder ausgeblendet wird. Die Animation der Maske ist unabhängig von etwaigen Animationen des Hostelements.

Bei rechteckigen Masken können Sie abgerundete Ecken animieren. Bei "clip path"-Polygonmasken lässt sich auch die Form der Maske animieren, jedoch nicht die Anzahl der Seiten. Positionieren Sie dazu die Eckpunkte an einem Keyframe neu.

Masken können nicht in mehreren Frames bearbeitet werden. Wählen Sie zur Bearbeitung der Maskenanimation jeweils nur einen Keyframe aus.

Hinweis: Wenn Sie Bildmasken mit geringerer Geschwindigkeit animieren, kann ein Jitter-Effekt auftreten, da dezimale Pixelwerte zwischen Keyframes gerundet werden.

Browserkompatibilität

In Safari werden keine Animationen über "clip path"-Masken ausgeführt, wenn Ihr Dokument <canvas>-Elemente enthält, z. B. für die Komponente "Übergangsgalerie", "Bildeffekt" oder "Partikeleffekte".

Masken in responsiven Layouts

Mit Medienregeln können Sie die Maskeneigenschaften und Animationen in bestimmten Größenbereichen der Darstellung überschreiben. Bei Bildmasken haben Sie auch die Möglichkeit, die Quelle zu überschreiben, um ein anderes Bild zu verwenden. Bei Farbverlaufsmasken können Sie den Farbverlauf ändern.

Hinweis: Wenn Sie die Überschreibung für eine Positions- oder Größeneigenschaft entfernen, werden sowohl die Positionseigenschaften (oben und links) als auch beide Größeneigenschaften (Breite und Höhe) automatisch zurückgesetzt. Bei "clip path"-Masken werden alle Positions- und Größeneigenschaften zurückgesetzt.

War das hilfreich?

Wie können wir die Seite verbessern?