Nicht-rechteckige Header erstellen

Bei Medium identifizierte Jon Moore kürzlich „nicht-rechteckige Header“ als einen kleinen Trend. Also: noch nicht verrückt populär, aber wartet nur ab, Kleiner.

Wir sprechen von Headern (oder allgemeiner von Container-Elementen), die eine nicht-rechteckige Form haben.

Wie Trapeze

Oder komplexere geometrische Formen

Oder abgerundet/elliptisch

Oder sogar Gesäßbacken-förmig

Ich wette, diese werden auch immer beliebter. Lasst uns also der Masse zuvorkommen und über ein paar Wege sprechen, diese zu codieren. Denn seien wir ehrlich: Sie sehen ziemlich großartig aus.

Bild

Vielleicht der einfachste Weg, einen der oben abgebildeten nicht-rechteckigen Header zu erstellen, ist, ein Bild über deinen Header zu legen.

Aber hier gibt es ein paar Probleme

• Responsives Verhalten? Diese Masken sind oft vollbreit und es wird mühsam, verschiedene Breiten der Form zu definieren (z. B. srcset) oder Pixelation von Rasterbildern zu riskieren.
• Es ist eine komplett separate Datei, die vom Server abgerufen werden muss – scheint verschwenderisch für einfache Formen.
• Es ist langsam, im Browser zu iterieren, wenn man eine Bilddatei(en) aus seinem Designprogramm neu exportieren muss.

Wir können all diese Probleme auf einmal lösen. Du weißt vielleicht schon, wohin das hier führt.

SVG

Im Vergleich zum Exportieren eines JPG aus Sketch ist ein Inline-SVG performanter, einfach responsiv zu gestalten und leicht im Design zu iterieren. Tatsächlich ist dies in den meisten Fällen die Methode, die ich empfehlen würde. Vielseitig, browserübergreifend, Vektor und fabelhaft.

Bei einem schrägen Hintergrund muss man eine Entscheidung treffen: Was soll bei wechselnder Bildschirmbreite konstant bleiben, der Winkel oder der Höhenunterschied zwischen den beiden Seiten?

Wenn der *Winkel* konstant bleiben soll, stelle die Höhe des SVG in vw ein

Wenn der Höhenunterschied konstant bleiben soll, stelle die Höhe des SVG in Pixel ein

Und du musst dich nicht für eine entscheiden – wir können das responsiv gestalten, da SVG-Elemente Media Queries unterliegen. Siehe diesen geometrischen Header-Stil bei Breiten unter und über 700 Pixel.

Verdammt, Mann. Was gibt es da nicht zu lieben? Oh, und wir können sogar den Gesäßbacken-Stil machen.

(Vielleicht ist das besser mit Bezier-Kurven zu machen, aber du verstehst die Idee!)

Eine weitere wichtige Anmerkung: Wenn du einen SVG-Hintergrund *komplett* in CSS machen willst, könntest du das SVG speichern und seine URL in einem Pseudo-Element referenzieren.

header::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100px;
  background: url(divider.svg);
}

Und wenn du `divider.svg` als wiederkehrendes Element in verschiedenen Szenarien verwendest, kannst du es auch unterschiedlich färben, wie du es brauchst

header::after polygon {
  fill: white;
}

Aber hier ist ein Problem: Was ist, wenn der Abschnitt unter dem Header einen komplizierten Hintergrund hat? In all diesen bisherigen Beispielen haben wir einfach einen schlichten weißen Hintergrund angenommen. Was, wenn es einen schicken Farbverlauf oder ein anderes Hintergrundbild gibt? Was dann?

clip-path

Diese Eigenschaft kommt zur Rettung, wenn du einen moderat komplexen Hintergrund unter dem Header hast und daher möchtest, dass die Maskierung *innerhalb* des nicht-rechteckigen Headers erfolgt, anstatt durch ein Element *danach*.

Und ähnlich wie bei der SVG-Syntax kannst du das responsive Verhalten des obigen Codes von *Winkel-bleibt-konstant* zu *Höhenunterschied-bleibt-konstant* ändern, indem du die berechnete Höhe in einen einfachen Prozentsatz änderst.

Der größte Nachteil von Clip-path? Die Browserunterstützung ist nicht gerade großartig. Je nachdem, wie wichtig dein nicht-rechteckiger Header oder deine Div ist, könnte es sich jedoch um eine progressive Verbesserung handeln. In diesem Fall kannst du Clip-path ruhig verwenden!

border-radius

Bisher haben wir nur Methoden erwähnt, die zum Erzeugen aller oben genannten Formen funktionieren. Wenn wir jedoch wissen, welche spezielle Form unser Header haben soll, haben wir möglicherweise Zugriff auf einen einfacheren Weg.

Zum Beispiel ist ein *konvexer* elliptischer Header perfekt für `border-radius` geeignet.

Und ein konkav elliptischer Header könnte einfach den border-radius auf dem Element nach dem Header haben.

section {
  border-bottom-left-radius: 50% 20%;
  border-bottom-right-radius: 50% 20%;
}

Ein weiterer Vorteil dieser Methode ist, dass der Hintergrund des darunterliegenden Abschnitts weiterhin Hintergrundbilder haben kann.

transform: skew

Wenn wir wissen, dass wir einen trapezförmigen Header erstellen wollen, können wir eine CSS-Transformation verwenden, um das Ganze zu verzerren.

Dies hat den Nebeneffekt, dass alle Kindelemente des verzerrten Elements ebenfalls verzerrt werden. Daher solltest du ein Kindelement im Header hinzufügen, das verzerrt wird, und alles andere kommt in Geschwisterelemente.

Stripe’s Homepage-Design nutzt diese Methode und, noch brillanter, sie beinhalten einige span-Elemente (jedes ist ein Farbblock), die mit dem Elternelement verzerrt werden, was einen komplexeren und farbenfroheren Effekt erzeugt.

Welche ist am besten?

Meiner Meinung nach ist SVG generell die beste Wahl. Wenn du jedoch einen komplexeren Hintergrund unter dem Header hast, dann hängt die beste Wahl von der Form ab. In diesem Fall würde ich untersuchen, ob `skew` oder `border-radius` die gewünschte künstlerische Richtung erfüllen kann oder ob die Browserunterstützung unwichtig genug ist, um `clip-path` zu verwenden.

	Ermöglicht komplexe Hintergründe darunter	Browser-Unterstützung	Erstellbare Formen
Bild	Nein	Ja	Alle
SVG	Nein	Ja	Alle
Clip-path	Ja	Nein	Alle
Border-radius	Ja	Ja	Nur elliptisch
Transform: skew	Ja	Ja	Nur trapezförmig

---