Wie bekommt man Wellenformen hin?

Bild - (html, Design, Webseite)

3 Antworten

Mit ner einfachen Border kriegt man das nicht hin... Du musst bedenken, dass du mit dem Attribut border-radius nur die Ecken einer Box abrunden kannst. Demnach kannst du 2 Halbkreise machen, aber was machst du mit dem konkaven Teil? Später kommt dann noch der Schatten dazu und das bringt erst einmal Probleme...
Du kannst es mit SVG versuchen, aber damit habe ich mich nicht groß auseinandergesetzt.

Am besten machst du einfach ein transparentes PNG daraus... die Mediengestalter auf meiner Arbeit machen das auch nicht anders...

Ich sehe dafür drei javascriptlose Möglichkeiten.

1. Ein Bild, würde auch mit einem gehen, das du dann einfach drehst.

2. svg, was praktisch ein Bild ist, nur halt gecodet. Wenn du dir den Aufwand machen möchtest, ansonsten kannst du auch eine Graphik als svg abspeichern und dann bearbeiten. Da du aber keine Animation machen möchtest, könntest du auch gleich ein normales Bild nehmen.

3. Mit sass

Du könntest eine Funktion aufstellen, die eine Vielzahl in Wellenform anordnet. Diese lässt du dann so schnell bewegen, dass es nach einer stillen Linie aussieht. Ich hatte da mal vor einiger Zeit was ähnliches gemacht. Sind dann natürlich sehr viele divs. Besser wäre es, dafür box-shadows zu nehmen, dann kannst du das Ganze auch mit einem einzelnen div verwirklichen. Hier ist mal pen: https://codepen.io/phng/pen/egBpKg

1. Möglichkeit: Klicke mit dem Rechten Mauszeiger auf das Element (Auf der Website) und dann steht dort: "Untersuchen". Dann wird dir der Quellcode angezeigt.

Ich denke, dass es einfach ein Bild ist (mit Photoshop etc.) gemacht, und dann eingefügt.

Hallo MrMassachusetts,

Dieses Bild ist aus Photoshop und von mir erstellt. Das ich Objekte untersuchen kann ist mir bewusst. 

Über die Alternative habe ich auch schon nachgedacht und momentan scheint es die einzige Lösung zu sein.

0

Was möchtest Du wissen?