„Gooey“-Effekt mit SVG-Filtern erstellen
Kommentare

CSS bietet zahlreiche Möglichkeiten, Content mithilfe von ansprechenden Effekten aufzuwerten. Hilfreich sind dafür allerdings auch SVG-Filter, mit denen beispielsweise Menüs und Navigationen eine Art „klebriger“ („Gooey“)-Effekt hinzugefügt werden kann, wenn diese geöffnet werden.

Dabei ist der Einsatz solcher SVG-Filter nicht schwierig. Lucas Bebber erklärt, wie sie funktionieren und wie sich mit ihnen der Gooey-Effekt erstellen lässt.

Funktionsweise von SVG-Filtern

SVG-Filter sind ein nützliches Tool beim Erstellen von Effekten mit CSS, die in vielen Browsern wie Firefox und Chrome (inklusive der Android-Version) auf reguläre DOM-Elemente angewandt werden können. Ein Filter-Element beinhaltet dabei ein oder mehrere Filter-Grafikelemente, die angeben, welche Aufgabe der Filter erfüllt.

Dazu gehören beispielsweise Blurring, Farbveränderungen oder Schattierungen. Einige Filter-Elemente nehmen dabei auch mehrere Input-Parameter an, sodass sie beispielsweise erst mit einem Blur-Effekt versehen und dann schattiert werden können.

Gooey-Effekt erzeugen

Um einen Gooey-Effekt zu bewirken, werden zwei oder mehr Objekte miteinander vermischt, mit einem Blur-Effekt versehen und dann der Kontrast erhöht. Allerdings sorgt die reine CSS-Technik dabei für einige Probleme: so werden nicht nur die Farben durcheinandergebracht, der Content wird auch so sehr miteinander vermischt, dass er effektiv nicht nutzbar ist; zudem benötigt der Container einen Hintergrund, sodass keine Transparenz möglich ist.

Hier kommen die SVG-Filter ins Spiel. Sie ermöglichen es, den Kontrast des Alpha-Kanals zu erhöhen und mit dem SourceGraphic-Keyword den Content sichtbar zu machen. Genauso erfordern sie einen transparenten Hintergrund.

Für den Gooey-Effekt wird zunächst ein Blur-Element auf das SourceGraphic-Keyword angewandt und das Ergebnis benannt. Dann wird ein Farbmatrix-Filter auf das vorige Resultat angewandt und anschließend die Originalgraphik über den erstellten Effekt eingefügt.

Obwohl der Effekt relativ leicht zu erstellen ist, gibt es einige Überlegungen, die man dabei im Hinterkopf behalten sollte. So sollte der Filter auf den Container des Elements und nicht auf das Element selbst angewandt werden; zudem sollte der Container größer sein, als sein Inhalt. Auch ist der SVG-Filter zwar grundsätzlich leichtgewichtig, kann aber schnell Ressourcen-intensiv werden, wenn er auf große Bereiche angewandt wird.

Einige Code-Beispiele und eine Demo des Gooey-Effekts in Aktion finden sich in Lucas Bebbers Artikel zum Thema. Dort gibt es auch einige weitere Tipps zur Nutzung von SVG-Filtern, etwa, um rechteckigen Objekten einen Gooey-Effekt hinzuzufügen.

Aufmacherbild: Honey drizzling into a small pile. von Shutterstock / Urheberrecht: TAGSTOCK1

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -