Rauschen durch einen seltsamen CSS-Farbverlauf-Bug erzeugen 

👋 Die Demos in diesem Artikel experimentieren mit einem nicht standardmäßigen Fehler im Zusammenhang mit CSS-Farbverläufen und Subpixel-Rendering. Ihr Verhalten kann sich jederzeit in Zukunft ändern. Sie sind außerdem extrem ressourcenintensiv. Wir laden sie asynchron, wenn Sie zum Laden klicken, möchten Sie aber trotzdem darauf hinweisen, falls der Lüfter Ihres Laptops anfängt zu drehen.

Erinnern Sie sich an das Rauschen auf alten Fernsehern ohne Signal? Oder wenn das Signal schlecht ist und das Bild verzerrt wird? Falls das Konzept eines TV-Signals vor Ihnen liegt, hier ist ein GIF, das genau zeigt, was ich meine.

Bild anzeigen (enthält automatisch abspielende Medien)

Ja, wir werden etwas Ähnliches nur mit CSS machen. Hier ist, was wir erstellen

Bevor wir mit dem Code beginnen, möchte ich sagen, dass es bessere Wege gibt, einen Rauscheffekt zu erzielen, als die Methode, die ich Ihnen zeigen werde. Wir können SVG, <canvas>, die filter-Eigenschaft usw. verwenden. Tatsächlich hat Jimmy Chion einen guten Artikel geschrieben, der zeigt, wie man es mit SVG macht.

Was ich hier tun werde, ist eine Art CSS-Experiment, um einige Tricks zu erforschen, die einen Fehler bei Farbverläufen ausnutzen. Sie können es in Ihren eigenen Nebenprojekten zum Spaß verwenden, aber die Verwendung von SVG ist sauberer und besser für ein echtes Projekt geeignet. Außerdem verhält sich der Effekt je nach Browser unterschiedlich. Wenn Sie sich das ansehen, ist es am besten, es in Chrome, Edge oder Firefox anzuzeigen.

Lasst uns etwas Lärm machen!

Um diesen Rauscheffekt zu erzielen, werden wir... Farbverläufe verwenden! Nein, es gibt keine Geheimzutat oder neue Eigenschaft, die ihn bewirkt. Wir werden Dinge verwenden, die bereits in unserer CSS-Werkzeugkiste vorhanden sind!

Der „Trick“ beruht auf der Tatsache, dass Farbverläufe schlecht im Antialiasing sind. Kennen Sie diese gezackten Kanten, die wir erhalten, wenn wir Farben mit harten Stopps verwenden? Ja, ich spreche in den meisten meiner Artikel davon, weil sie ein wenig störend sind und wir immer ein paar Pixel hinzufügen oder entfernen müssen, um sie zu glätten.

Wie Sie sehen, wird der zweite Kreis besser gerendert als der erste, da es einen winzigen Unterschied (0.5%) zwischen den beiden Farben im Farbverlauf gibt, anstatt einen direkten harten Farb-Stopp mit ganzen Zahlen zu verwenden, wie beim ersten Kreis.

Hier ist ein weiterer Blick, diesmal mit einem conic-gradient, bei dem das Ergebnis offensichtlicher ist

Eine interessante Idee kam mir, als ich diese Demos erstellte. Anstatt die Verzerrung ständig zu beheben, warum nicht versuchen, das Gegenteil zu tun? Ich hatte keine Ahnung, was passieren würde, aber es war eine lustige Überraschung! Ich nahm die Werte des konischen Farbverlaufs und begann, sie zu verringern, um die schlechten Antialiasing-Ergebnisse noch schlimmer aussehen zu lassen.

Sehen Sie, wie schlecht das letzte ist? Es ist irgendwie in der Mitte zerstreut und nichts ist glatt. Machen wir es Vollbild mit kleineren Werten

Ich nehme an, Sie sehen, worauf das hinausläuft. Wir erhalten eine seltsame verzerrte Darstellung, wenn wir sehr kleine Dezimalwerte für die harten Farbstopps in einem Farbverlauf verwenden. Unser Rauschen ist geboren!

Wir sind noch weit vom gewünschten körnigen Rauschen entfernt, weil wir den eigentlichen konischen Farbverlauf noch sehen können. Aber wir können die Werte auf sehr, sehr kleine reduzieren – wie 0.0001% – und plötzlich gibt es keinen Farbverlauf mehr, sondern reine Körnigkeit.

Tada! Wir haben einen Rauscheffekt, und das alles nur mit einem CSS-Farbverlauf. Ich wette, wenn ich es Ihnen gezeigt hätte, bevor ich es erklärt hätte, hätten Sie nie erkannt, dass Sie einen Farbverlauf sehen. Man muss sehr genau auf die Mitte des Farbverlaufs schauen, um ihn zu sehen.

Wir können die Zufälligkeit erhöhen, indem wir die Größe des Farbverlaufs sehr groß machen und gleichzeitig seine Position anpassen

Der Farbverlauf wird auf ein festes Quadrat von 3000px angewendet und bei den Koordinaten 60% 60% platziert. Wir können seine Mitte in diesem Fall kaum erkennen. Dasselbe kann auch mit einem radialen Farbverlauf gemacht werden.

Und um die Dinge noch zufälliger zu machen (und näher an einem echten Rauscheffekt) können wir beide Farbverläufe kombinieren und background-blend-mode verwenden, um die Dinge zu glätten

Unser Rauscheffekt ist perfekt! Selbst wenn wir uns jedes Beispiel genau ansehen, gibt es keine Spur von einem der Farbverläufe, sondern schönes, körniges Rauschen. Wir haben diesen Antialiasing-Fehler einfach in ein elegantes Feature verwandelt!

Nachdem wir das nun haben, schauen wir uns ein paar interessante Beispiele an, wo wir es vielleicht verwenden könnten.

Animiertes kein TV-Signal

Zurück zur Demo, mit der wir begonnen haben

Wenn Sie sich den Code ansehen, werden Sie sehen, dass ich eine CSS-Animation auf einem der Farbverläufe verwende. Es ist wirklich so einfach! Alles, was wir tun, ist, die Position des konischen Farbverlaufs mit einer blitzschnellen Dauer (.1s) zu ändern, und das ist es, was wir bekommen!

Diese gleiche Technik habe ich bei einer Ein-Div-CSS-Art-Challenge verwendet

Körniger Bildfilter

Eine weitere Idee ist, das Rauschen auf ein Bild anzuwenden, um einen altmodischen Look zu erhalten. Hovern Sie über jedes Bild, um es ohne Rauschen zu sehen.

Ich verwende nur einen Farbverlauf auf einem Pseudo-Element und mische es mit dem Bild dank mix-blend-mode: overlay.

Wir können einen noch lustigeren Effekt erzielen, wenn wir die CSS-Eigenschaft filter verwenden

Und wenn wir noch eine mask hinzufügen, können wir noch mehr Effekte erzielen!

Körnige Textbehandlung

Wir können diesen gleichen Effekt auch auf Text anwenden. Wieder brauchen wir nur ein paar verkettete Farbverläufe für background-image und mischen dann die Hintergründe. Der einzige Unterschied ist, dass wir auch background-clip verwenden, sodass der Effekt nur auf die Grenzen jedes Zeichens angewendet wird.

Generative Kunst

Wenn Sie weiter mit den Farbverlaufswerten spielen, können Sie überraschendere Ergebnisse als ein einfaches Rauschen erzielen. Wir können zufällige Formen erhalten, die stark an generative Kunst erinnern!

Natürlich sind wir weit von echter generativer Kunst entfernt, die viel Arbeit erfordert. Aber es ist trotzdem befriedigend zu sehen, was mit etwas erreicht werden kann, das technisch als Fehler gilt!

Monstergesicht

Ein letztes Beispiel, das ich für die divtober 2022 Sammlung von CodePen erstellt habe

Zusammenfassung

Ich hoffe, Sie haben dieses kleine CSS-Experiment genossen. Wir haben nichts „Neues“ gelernt, aber wir haben eine kleine Eigenheit bei Farbverläufen genommen und sie in etwas Lustiges verwandelt. Ich sage es noch einmal: Dies ist nichts, was ich für ein echtes Projekt in Betracht ziehen würde, denn wer weiß, ob und wann Antialiasing irgendwann behoben wird. Stattdessen war dies eine sehr zufällige und angenehme Überraschung, als ich darauf stieß. Es ist auch nicht gerade einfach zu kontrollieren und verhält sich uneinheitlich über Browser hinweg.

Dennoch bin ich neugierig zu sehen, was Sie damit machen können! Sie können mit den Werten spielen, verschiedene Ebenen kombinieren, einen filter oder mix-blend-mode oder was auch immer verwenden, und Sie werden sicher etwas wirklich Cooles erzielen. Teilen Sie Ihre Kreationen im Kommentarbereich – es gibt keine Preise, aber wir können eine schöne Sammlung zusammenstellen!