Der klebrige Effekt

Das Folgende ist ein Beitrag von Lucas Bebber. Lucas ist der Urheber einiger der kreativsten Effekte, die ich je im Web gesehen habe. So sehr, dass ich nicht widerstehen konnte, selbst darüber zu bloggen, mehrfach. Diesmal ist es viel besser: Wir haben den Mann selbst gebeten, zu erklären, wie SVG-Filter funktionieren und wie man sie zur Erzeugung eines sehr coolen, klebrigen Effekts verwenden kann.

Vor einiger Zeit schrieb Chris über Form-Blobbing in CSS. Der Effekt ist cool und die Technik dahinter ist clever, aber der Ansatz über reguläre CSS-Filter hat mehrere Nachteile: keine Transparenz, kein Inhalt in den Blobs, schwer in anderen Farben als Schwarz und Weiß zu erzeugen, etc.

In diesen Tagen habe ich beim Herumspielen mit SVG-Filtern festgestellt, dass ich sie verwenden kann, um die meisten Probleme eines reinen CSS-Ansatzes zu umgehen. Hier sehen Sie ein klebriges Menü, das ich zur Demonstration des Effekts erstellt habe.

Siehe den Pen CSS Gooey Menu (Version 1) von Lucas Bebber (@lbebber) auf CodePen.

SVG-Filter 101

SVG-Filter sind ziemlich mächtig. Es ist ein ziemlich umfangreiches Thema. Hier werden wir nur die Grundlagen behandeln, die notwendig sind, um zu verstehen, wie dieser Effekt funktioniert.

Trotz des Namens können wir SVG-Filter durch CSS auf reguläre DOM-Elemente anwenden, in den meisten Browsern.

Dies ist die grundlegende Syntax zur Definition eines Filters

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="name-your-filter-here">
      ...          
      <!-- insert filters here -->
      ...
    </filter>
    ...
  </defs>
</svg>

Um einen SVG-Filter auf ein DOM-Element anzuwenden

.selector {
  filter: url('#name-of-your-filter-here');

  /* you can also load filters from external SVGs this way: */
  filter: url('filters.svg#name-of-your-other-filter-here');
}

Sie benötigen möglicherweise Vendor-Präfixe, um die Eigenschaft filter zu verwenden.

Ein <filter>-Element enthält eine oder mehrere Filterprimitive, bei denen es sich um Operationen handelt, die vom Filter ausgeführt werden, z. B. Weichzeichnen, Farbtransformationen, Schattierung. Eine vollständige Liste der Filterprimitive finden Sie hier.

Sehen wir uns ein paar Beispiele an

Siehe den Pen svg blur demonstration von Lucas Bebber (@lbebber) auf CodePen.

<filter id="blur">
  <feGaussianBlur in="SourceGraphic" stdDeviation="3" />
</filter>

Dieser Filter führt ein einziges, einfaches 3-Pixel-Weichzeichnen des Objekts durch. Beachten Sie das Attribut in="SourceGraphic". Das Attribut in definiert die Eingabe einer Filterprimitiv. SourceGraphic ist ein Schlüsselwort, das die ursprüngliche, vor dem Filter liegende Grafik des Elements zurückgibt. Was dies bedeutet, ist also, dass die Eingabe des Weichzeichnungsfilters die ursprüngliche Grafik des Objekts sein wird. Ziemlich einfach.

Sehen wir uns nun einen gängigen, aber komplexeren Effekt an: einen Schlagschattenfilter. Dies ist nützlich, um zu demonstrieren, wie Filterprimitive miteinander verknüpft werden können.

Siehe den Pen svg drop shadow demonstration von Lucas Bebber (@lbebber) auf CodePen.

<filter id="drop-shadow">
  <feGaussianBlur in="SourceGraphic" stdDeviation="7" result="shadow" />
  <feOffset in="shadow" dx="3" dy="4" result="shadow" />
  <feColorMatrix in="shadow" type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.6 0" result="shadow" />
  <feBlend in="SourceGraphic" in2="shadow" />
</filter>

Beachten Sie das Attribut result des ersten Filters und die nachfolgenden Attribute in. Mit dem Attribut result können Sie das Ergebnis eines Filters benennen und dann einen Filter auf *dieses Ergebnis* anwenden, anstatt auf die Quellgrafik. Dies ermöglicht es Ihnen in diesem Beispiel, ein Objekt weichzuzeichnen, das *weichgezeichnete Objekt* abzudunkeln und dann die Position des *weichgezeichneten und abgedunkelten* Objekts zu verschieben.

Achten Sie auf das letzte Element dort, die Primitiv <feBlend>. Sie zeigt, dass einige Filterprimitive mehrere Eingaben (den Parameter in2) nehmen und dass Sie das Schlüsselwort SourceGraphic mehrmals und an jeder Stelle des Filters aufrufen können. Der letzte Filter nimmt in diesem Beispiel sowohl das Schlüsselwort SourceGraphic als auch das Ergebnis shadow auf, um das Originalbild über den erstellten Schatten zu legen.

Nachdem die Grundlagen von SVG-Filtern behandelt sind, sehen wir uns an, wie man diesen klebrigen Effekt erzielt.

Dinge zum Kleben bringen

Die grundlegende Technik wurde bereits hier behandelt. Zur Wiederholung: Die Idee ist, zwei oder mehr Objekte zusammen zu verwischen und den Kontrast zu erhöhen. Ziemlich einfach und funktioniert wie ein Zauber.

Siehe den Pen metaballs demonstration von Lucas Bebber (@lbebber) auf CodePen.

Jedoch, wie wir bereits gesehen haben, tut dies auch

1. Verändert die Farben, was es schwierig macht, etwas anderes als Schwarz und Weiß zu verwenden.
2. Verwischt den Inhalt, was ihn unbrauchbar macht.
3. Der Container benötigt einen Hintergrund, daher keine Transparenz.

Alles in allem macht dies diesen Effekt normalerweise unpraktisch.

Mit SVG-Filtern können wir jedoch einige Dinge tun, die mit reinen CSS-Filtern nicht möglich waren: Wir können den Kontrast nur des Alpha-Kanals erhöhen, ohne die Farben zu ändern; und wir können mit dem Schlüsselwort SourceGraphic, das wir zuvor gesehen haben, den Inhalt ebenfalls sichtbar machen. Da wir uns mit dem Alpha-Kanal befassen, ist er nicht nur transparent, ein transparenter Hintergrund ist *erforderlich*, also seien Sie vorsichtig damit.

Das ist also der grundlegende Code

<filter id="goo">
  <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
  <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7" result="goo" />
  <feBlend in="SourceGraphic" in2="goo" />
</filter>

Es ist ziemlich kurz, lassen Sie es uns aufschlüsseln.

1. Zuerst wenden wir einen 10-Pixel-Weichzeichner auf die SourceGraphic an und benennen dieses Ergebnis.
2. Dann wenden wir auf das vorherige Ergebnis einen Farbmatrixfilter an, um den Kontrast des Alpha-Kanals zu erhöhen.
3. Schließlich fügen wir die Originalgrafik über den erstellten Effekt ein.

Über Farbmatrizen

Wenn Sie noch nie einen Farbmatrixfilter verwendet haben, benötigt er möglicherweise eine Erklärung. Sie können ihn sich als Tabelle mit vier Zeilen und fünf Spalten vorstellen. Sieht so aus

   | R | G | B | A | +
---|-------------------
 R | 1 | 0 | 0 | 0 | 0
---|-------------------
 G | 0 | 1 | 0 | 0 | 0
---|-------------------
 B | 0 | 0 | 1 | 0 | 0
---|-------------------
 A | 0 | 0 | 0 | 1 | 0
---|-------------------

Jede Zeile stellt einen Kanal (Rot, Grün, Blau und Alpha) dar und dient zur Einstellung des Kanalwerts. Jede der ersten vier Spalten stellt ebenfalls einen Kanal dar und gibt den aktuellen Wert des jeweiligen Kanals zurück. Eine Zahl in einer Zelle fügt dann dem Zeilenkanal das Ergebnis der Multiplikation dieser Zahl mit dem aktuellen Wert des durch ihre Spalte dargestellten Kanals hinzu. Beispielsweise fügt eine 0,5 in der Zeile R, Spalte G, für jedes Pixel dem roten Kanal den aktuellen Wert von Grün * 0,5 hinzu. Die letzte Spalte stellt keinen Kanal dar und dient zur Addition/Subtraktion, was bedeutet, dass eine Zahl dort zu ihrem Kanal ihren Wert multipliziert mit 255 hinzufügt.

Das ist eine ausführliche Erklärung, aber die Verwendung des Filters ist ziemlich einfach. In unserem Fall, da wir nur den Kontrast des Alpha-Kanals erhöhen, wird unsere Matrix wie folgt aussehen

   | R | G | B | A | +
---|-------------------
 R | 1 | 0 | 0 | 0 | 0
---|-------------------
 G | 0 | 1 | 0 | 0 | 0
---|-------------------
 B | 0 | 0 | 1 | 0 | 0
---|-------------------
 A | 0 | 0 | 0 |18 |-7
---|-------------------

Dies belässt die RGB-Kanäle unverändert, multipliziert den Wert des Alpha-Kanals mit 18 und zieht dann 7 * 255 von diesem Wert ab, wodurch effektiv nur die Transparenz kontrastiert wird. Diese Werte können nach Ihren Bedürfnissen angepasst werden.

Um diese Matrix auf unseren feColorMatrix-Filter anzuwenden, müssen wir diese Zahlen nur sequenziell schreiben, so:

values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"

Demo

Und damit ist unser grundlegender Effekt fertig! Hier ist er

Siehe den Pen svg goo effect demonstration von Lucas Bebber (@lbebber) auf CodePen.

Sie können ihn dann an Ihre Bedürfnisse anpassen, z. B. einen Schlagschatten hinzufügen, verschiedene Farben für jedes Element verwenden oder was auch immer Ihnen einfällt!

Überlegungen

• Der Filter sollte auf den *Container* der Elemente angewendet werden, nicht auf die Elemente selbst.
• Der Container sollte einen gewissen Überhangbereich haben, d. h. er sollte etwas größer als sein Inhalt sein, sonst könnten Sie Artefakte an den Rändern erhalten.
  

  

• Um diesen Filter auf spitze Objekte wie Rechtecke anwenden zu können, müssen wir einen etwas ausgefeilteren Ansatz wählen. Anstatt nur das Originalbild über den Gooey-Effekt zu zeichnen, könnten wir den feComposite-Filter mit dem Operator atop verwenden, um alles außerhalb des Gaus auszublenden.

  <filter id="fancy-goo">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
    <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo" />
    <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
  </filter>

  Siehe den Pen comparison between methods of applying the goo filter von Lucas Bebber (@lbebber) auf CodePen.

  Auf diese Weise können wir den Filter nicht nur verwenden, um diesen schicken Gooey-Effekt zu erzielen, sondern auch für einfachere Anwendungen wie das Abrunden der Ecken von Formen, die mehrere Rechtecke umfassen.

• Dieser Filter ist zwar klein, kann aber ressourcenintensiv sein, wenn er auf große Bereiche angewendet wird, also seien Sie vorsichtig.

Unterstützung

SVG-Filter haben gute Unterstützung, aber nicht alle Browser unterstützen die Anwendung auf reguläre DOM-Elemente, insbesondere Safari. Sie funktionieren jedoch zumindest in Firefox und Chrome, auch in der Android-Version, und der Filter stürzt ab, wenn er nicht funktioniert. Wenn Sie den Effekt unbedingt benötigen, sollten Sie SVG-Elemente anstelle von DOM-Elementen verwenden.