Website-Designs mit runden Headern?

Hat jemand Beispiele für Live-Websites mit runden Headern? Ähnlich wie hier: http://www.nasty-creatures.com/

Ich arbeite an etwas für einen Kunden und habe mir ein Design mit einem runden Header ausgedacht, aber ich brauche einige andere Beispiele von Live-Sites, damit ich sehen kann, wie sie aufgebaut sind. Ich habe das Internet durchforstet und kann keine anständigen Beispiele finden.

Wenn mich jemand in die richtige Richtung lenken kann, wäre ich sehr dankbar!

Dieser Header ist rechteckig (wo sich das Menü befindet). Das Bild darunter ist kreisförmig, aber das ist kein Header. Mir fallen keine Seiten mit einem runden Header ein
Ich habe keine Ahnung, was dabei herauskommen wird, aber versuchen Sie, dies auf Pinterest zu pinnen, und kehren Sie dann zurück, um es von einem anderen Konto oder einem anderen Browser aus anzusehen, um zu sehen, ob sie Empfehlungen für ähnliche Layouts mit ihren Algorithmen finden. Es kann einige Tage dauern, bis das System das Bild aufgenommen hat, wenn es neu für sie ist.
Wenn Sie sich die Website ansehen, werden Sie feststellen, dass sie eigentlich nicht Teil des Headers ist. Das kreisförmige Bild wird mit einer Klasse von .main-bg auf dem Body-Tag gesetzt. Und das Bild ist das Hintergrundbild für die Klasse .main-bg.

Antworten (1)

Der wahrscheinlich beste Ansatz ist, mit Clippy herumzuspielen , das Ihnen bei der gesuchten Form hilft und das CSS sauber für Sie ausgibt.

Dann müssen Sie nur noch optimieren und in Ihr Design integrieren. Ich habe ein Beispiel in Codepen zusammengestellt , das helfen sollte. Hier ist das wesentliche CSS:

-webkit-clip-path: ellipse(60% 80% at 50% 0%);
clip-path: ellipse(50% 17% at 50% 0%);

Viel Spaß beim basteln :)

Danke an Lea Verou für das Fischgrätenmuster.

Website-Designs mit runden Headern?
AntwortenHierDatenschutz-Bestimmungen1y, 0v