CSS-Effekte

Mithilfe von CSS-Effekten können Sie Ihren Elementen visuelle Effekte hinzufügen oder konfigurieren, wie sie in sich überschneidende Elemente übergehen. CSS-Effekte können in Medienregeln animiert und überschrieben werden.

Die Einstellungen für CSS-Effekte finden Sie im Steuerfeld CSS-Effekte, wenn ein einzelnes Element ausgewählt ist. Falls das Steuerfeld in Ihrem Arbeitsbereich nicht sichtbar ist, können Sie es über das Menü Fenster einblenden lassen.

CSS-Effekte können nicht auf Masken angewendet werden.

Mischmodus „Vermischen“

Mit dem Mischmodus „Vermischen“ wird festgelegt, wie der Inhalt eines Elements mit dem Hintergrund des Elements vermischt wird – auf Grundlage des Farbtons, der Sättigung und der Helligkeit des Elements und der Hintergrundfarben.

So wenden Sie den Mischmodus „Vermischen“ an:

Wählen Sie das Element aus, das mit dem Hintergrund vermischt werden soll.
Wählen Sie im Steuerfeld CSS-Effekte im Drop-down-Menü Mischmodus „Vermischen“ einen Modus aus.

Sie können aus verschiedenen Mischmodi wählen, um sich eine Vorschau anzusehen. Wenn sich ein Element nicht wie erwartet vermischt, prüfen Sie, ob sich das ausgewählte Element vor den anderen Elementen befindet, mit denen es vermischt werden soll.

Liste der Mischmodi

Normal (kein Effekt): Es wird nichts vermischt.
Farbe: Der Farbton und die Sättigung der Elementfarbe sowie die Leuchtkraft der Hintergrundfarbe werden verwendet.
Farbig nachbelichten: Die Hintergrundfarbe wird invertiert, durch die Elementfarbe dividiert und das Ergebnis wieder invertiert.
Farbig abwedeln: Die Hintergrundfarbe wird durch den Kehrwert der Elementfarbe dividiert.
Abdunkeln: Die dunklere Farbe des Elements oder Hintergrunds wird verwendet.
Unterschied: Die dunklere wird von der helleren Farbe subtrahiert.
Ausschluss: Dieser Modus entspricht dem Modus Unterschied, aber mit einem geringeren Kontrast.
Hartes Licht: Wenn das Element dunkler als der Hintergrund ist, wird der Modus Multiplizieren angewendet, ist es heller, der Modus Bildschirm.
Farbton: Der Farbton der Elementfarbe und die Sättigung und die Leuchtkraft der Hintergrundfarbe werden verwendet.
Aufhellen: Die hellere Farbe des Elements oder Hintergrunds wird verwendet.
Leuchtkraft: Die Leuchtkraft der Elementfarbe und der Farbton und die Sättigung der Hintergrundfarbe werden verwendet.
Multiplizieren: Die Elementfarbe wird mit der Hintergrundfarbe multipliziert.
Overlay: Wenn das Element heller als der Hintergrund ist, wird der Modus Multiplizieren angewendet, ist es dunkler, der Modus Bildschirm.
Sättigung: Die Sättigung der Elementfarbe und der Farbton und die Leuchtkraft der Hintergrundfarbe werden verwendet.
Bildschirm: Die Element- und Hintergrundfarben werden invertiert, multipliziert und das Ergebnis wieder invertiert.
Weiches Licht: Dieser Modus entspricht dem Modus Hartes Licht, aber mit einem weicheren Effekt.

Filter

Mit Filtern können Sie einem Element mithilfe von CSS visuelle Effekte hinzufügen und es z. B. weichzeichnen oder ihm einen Schlagschatten hinzufügen.

In Videodokumenten und Bildanzeigen können Sie mithilfe des Hintergrund-Tools CSS-Filter auf den Bereich hinter einem Element anwenden.

Filter hinzufügen

So fügen Sie einen neuen Filter hinzu:

Wählen Sie das Element aus, dem ein Filter hinzugefügt werden soll.
Klicken Sie im Steuerfeld CSS-Effekte auf Filter hinzufügen.
Wählen Sie den gewünschten Filter aus. Folgende Filter sind verfügbar:
- Weichzeichnen
- Helligkeit
- Kontrast
- Schlagschatten
- Graustufen
- Farbton drehen
- Invertieren
- Deckung
- Sättigung
- Sepia
Passen Sie die Konfigurationsoptionen nach Bedarf an (weitere Informationen finden Sie unten).

Sie können einem Element mehrere Filter hinzufügen und in diesem Fall die Filter neu anordnen.