Formen-Blobbing in CSS

Wir haben gerade Shape Morphing in SVG behandelt, wo sich Formen von einer zu einer anderen ändern. Sehen wir uns nun Formen an, die ineinander übergehen! Sie wissen schon, diesen klebrigen, schlabberigen Blob-Effekt wie Quecksilbertropfen auf einer Oberfläche.

Ich bin mir nicht sicher, wer als Erster entdeckt hat, dass dies im Web möglich ist, aber der erste Ort, an dem ich es gesehen habe, war eine Demo von Lucas Bebber

Siehe den Pen Gooey Pagination von Lucas Bebber (@lbebber) auf CodePen.

Und dann noch einmal von Felix Hornoiu (GIF mit niedriger Bildrate für die Web-Praktikabilität)

Der Trick ist ziemlich einfach: Verwenden Sie Filter, um einem Element SOWOH Weichzeichnung als auch Kontrast hinzuzufügen

Die Weichzeichnung macht das Element offensichtlich unscharf, der Kontrast wirkt der Weichzeichnung entgegen und bevorzugt scharfe Farbänderungen. Wenn Sie genug Kontrast hinzufügen, bleibt wieder eine (ziemlich) scharf aussehende Form übrig.

Das Ausgefallene ergibt sich daraus, dass, wenn zwei weichgezeichnete (aber gezwungenermaßen nicht unscharf aussehende) Elemente nahe beieinander liegen, ihre potenziellen Weichzeichnungen genügend potenziellen Farbkontrast erzeugen, dass die Formen tatsächlich verbunden zu sein scheinen.

Ich finde es einfacher, wenn man die Formen weichzeichnet, aber dem gesamten Bereich Kontrast hinzufügt. Wie

.stage {
  /* must be explicit, for contrast to work */
  background: white;
  
  /* weirdness happens when edges hit, also consider hiding overflow */
  padding: 30px;
  
  -webkit-filter: contrast(20);
  filter: contrast(20);
}
.dot {
  border-radius: 50%;
  width: 50px;
  height: 50px;

  /* needs to be very contrasty color. E.g. light gray on white won't work */
  background: black;

  -webkit-filter: blur(15px);
  filter: blur(15px);
}

Und dann passiert der Spaß, wenn Sie Animation hinzufügen, um diese Dinger herumzuschwingen. Hier ist eine Demo, in der Sie mit den Werten spielen können, einschließlich Helligkeit, die die Weichzeichnung beeinflusst

Siehe den Pen Blobbing Playground von Chris Coyier (@chriscoyier) auf CodePen.

Browser-Unterstützung

Nicht mehr nur WebKit/Blink! Firefox 35 wird Filter ohne Flag oder sonstiges unterstützen. Aurora, ihre Beta-Beta, ist derzeit in v35 und ich habe sie geöffnet und sie funktioniert großartig.

Also… aktuelle Chrome / Safari / Opera / Firefox / iOS / Android. Nicht schlecht. Nur kein IE.

Vorhersagen von Ausrufezeichen

Das ist nicht praktikabel!!! Geh ins Bett.

Das lässt meinen Lüfter verrückt drehen!!! Ja, meine Demo mit vielen interagierenden Elementen beschäftigt meine CPU ziemlich. Die entspannteren Demos mit nur zwei sich stoßenden Kreisen sind jedoch in Ordnung. Nutzen Sie Ihre Urteilsfähigkeit.

Es gibt bessere Wege, das zu tun!!! Großartig.