Wie gestalte ich "Wellen" nur mit CSS?
Moin,
ich frage mich, ob man diesen Übergang zwischen den Farben, sprich die Wellen, mit nur CSS nachbaun kann, bzw womit die das gemacht haben könnten:
Damit meine ich den Übergang zwischen schwarz & weiß, bekommt man sowas mit nur CSS hin oder ist das ne Grafik, etc?
Hab schon gegoogelt aber nicht wirklich sowas in der Art gefunden.
Grüße
2 Antworten
Die Umsetzung dort ist ja bereits aufgeschlüsselt, daher zu der Frage, ob dies nur mit CSS möglich wäre: Ich denke, zumindest etwas ähnliches sollte möglich sein, ja.
Schau dir als Beispiel diese Webseite (auch in der Entwicklerkonsole des Browsers) an: http://www.cssplay.co.uk/layouts/cssplay-wavy-layout.html - dort wird der border-radius zur Umsetzung verwendet.
Für lineare Muster könnte man sich an diesem CodePen orientieren: https://codepen.io/Igorxp5/pen/ZQqvdQ
Und mit dem Canvas-Element sowie JS wäre dies natürlich ebenfalls möglich (https://codepen.io/beebs93/pen/NProXo), allerdings würde ich davon eher abraten, denn so verschleudert man wohl eher unnötig Ressourcen, nur um so einen Effekt hinzubekommen.
Das hier ist der Quelltext von dem Übergang:
<svg class="wave-qsoVIt" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 100" preserveAspectRatio="none">
<path class="wavePath-22lfEN" d="M826.337463,25.5396311 C670.970254,58.655965 603.696181,68.7870267 447.802481,35.1443383 C293.342778,1.81111414 137.33377,1.81111414 0,1.81111414 L0,150 L1920,150 L1920,1.81111414 C1739.53523,-16.6853983 1679.86404,73.1607868 1389.7826,37.4859505 C1099.70117,1.81111414 981.704672,-7.57670281 826.337463,25.5396311 Z" fill="currentColor">
</path>
</svg>
svg = Scalable Vector Graphics
Es handelt sich um eine zweidimensionale Vektorgrafik soweit ich das sehe.