Arbeiten mit Formen im Webdesign

Wenn wir eine neue Komponente auf einer Website erstellen, erstellen wir im Grunde Rechtecke unterschiedlicher Größe, ob wir uns dessen bewusst sind oder nicht. Aber was passiert, wenn wir ein wenig experimentieren wollen? Wie viele verschiedene Möglichkeiten gibt es, Formen zu erstellen?

In diesem Beitrag möchte ich grob einige der gängigsten Methoden zur Erstellung von Kreisen, Dreiecken und Polygonen umreißen und die Vor- und Nachteile dieser Methoden aufschreiben, damit wir mit denen experimentieren können, die uns vielleicht ein wenig unbekannt sind.

Hier sind einige der Möglichkeiten, wie Sie eine Form im Web erstellen können

1. border-radius
2. border
3. Drehen von Formen mit transform
4. Pseudo-Elemente
5. box-shadow
6. Text in Formen wickeln mit shape-outside
7. clip-path auf ein Element anwenden
8. SVG-Assets
9. canvas

border-radius

Die Eigenschaft border-radius ist vielleicht die einfachste Methode, einen Kreis zu erstellen, zum Beispiel

.element {
  height: 500px;
  width: 500px;
  border-radius: 50%;
}

Siehe den Pen LVembR von CSS-Tricks (@css-tricks) auf CodePen.

Sie können für border-radius jeden Längenwert verwenden. Wenn Sie interessiert sind, beschreibt Jessica Eldredge auch, warum wir 50 % anstelle von 100 % verwenden sollten, wenn wir einen einzelnen Wert verwenden, um alle vier Ecken gleichzeitig festzulegen.

Natürlich können wir mit dieser Eigenschaft auch eine Reihe anderer Formen erstellen, wie z. B. abgerundete Rechtecke und Ovale

Siehe den Pen 5dd5c582ec9b79c7d8ac38c350bd3f02 von CSS-Tricks (@css-tricks) auf CodePen.

Vorteile

• gut unterstützt von modernen Browsern.
• benötigt nur eine winzige Menge CSS.

Lesen Sie mehr über die Eigenschaft border-radius im Almanac.

Formen mit border

Wir können mit der Eigenschaft border eine Reihe verschiedener Formen erstellen. Zum Beispiel können wir durch Setzen der Hintergründe von drei Rändern eines Elements auf transparent das Aussehen eines Dreiecks nachahmen

.triangle {
  height: 0;
  width: 0;
  border-left: 100px solid red;
  border-right: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-top: 100px solid transparent;
}

Siehe den Pen vOpjXZ von CSS-Tricks (@css-tricks) auf CodePen.

Wir können Dreiecke erstellen, die in fast jede gewünschte Richtung zeigen. Hier ist ein animiertes Tutorial, wie das funktioniert

Siehe den Pen Animation to Explain CSS Triangles von Chris Coyier (@chriscoyier) auf CodePen.

Wenn Sie diesen Prozess automatisieren möchten, gibt es den CSS Triangle Generator, der Ihnen hilft. Wenn Sie eine programmatischere Methode zur Generierung von CSS-Dreiecken in einer Codebasis benötigen, haben wir bereits über das CSS Triangle Mixin geschrieben.

Mit dieser Technik ist es auch möglich, Trapeze zu erstellen

Siehe den Pen 580955e70863188e57c68338d9dfa2ae von CSS-Tricks (@css-tricks) auf CodePen.

Vorteile

• großartige Browserunterstützung.
• Tools sind verfügbar, zum Beispiel der CSS Shapes Generator, um diese Formen einfach zu erstellen.

Drehen von Formen mit transform

Um bestimmte Formen in CSS, wie z. B. Diamanten, zu erstellen, können wir die Eigenschaft transform auf ein normales Quadrat anwenden

.diamond {
  transform: rotate(45deg);
}

Siehe den Pen a4a12f6351b38e1a41e78676f20f0cf8 von CSS-Tricks (@css-tricks) auf CodePen.

Im obigen Beispiel wird der Diamant aufgrund der Transformation außerhalb seines Elternelements geschoben. Was wir hier tun müssen, ist die Eigenschaft transform-origin zu verwenden, um den Diamanten neu auszurichten

.diamond {
  transform: rotate(45deg);
  transform-origin: 0 100%;
}

Vorteile

• Gute Browserunterstützung.

Nachteile

• Erfordert die Korrektur der Ausrichtung der Form mit transform-origin, was je nach Situation ärgerlich sein kann.

Pseudo-Elemente

Pseudo-Elemente sind sehr wichtige Werkzeuge zur Erstellung von Formen in reinem CSS, da sie die Anzahl der Formen, die Sie erstellen können, erheblich verbessern. Nehmen wir zum Beispiel ein Fünfeck

Siehe den Pen ca0b36c2d7ea75ea7fd5cd982c328006 von CSS-Tricks (@css-tricks) auf CodePen.

Durch die Verwendung des Pseudo-Elements :before können wir zwei verschiedene Formen erstellen, die wir dann übereinander positionieren können. Eines der Probleme, das Ihnen bei dem CSS in diesem Beispiel auffallen könnte, sind jedoch die kniffligen Werte für die absolute Positionierung dieser beiden Teile.

Dies ist mein größter Kritikpunkt an der Erstellung komplexer Formen in CSS: die schiere Komplexität des erforderlichen Codes. Sobald Sie aus dem Bereich der Fünf- und Sechsecke herauskommen, werden Sie feststellen, dass knorriger Code erforderlich ist, der in den meisten Projekten wahrscheinlich als viel zu instabil eingestuft werden sollte.

Vorteile

• Sie können mit Pseudo-Elementen fast jede Form erstellen.
• Benötigt keinen zusätzlichen HTTP-Request, den ein Bild haben könnte.

Nachteile

• Bei größeren Projekten kann der für die Erstellung bestimmter Formen erforderliche Code unüberschaubar und zu kompliziert werden, um ihn auf lange Sicht beizubehalten.

box-shadow

Dies ist vielleicht die seltsamste Art, eine Form in CSS zu erstellen, denn mit der Eigenschaft box-shadow ist es möglich, unglaubliche Pixel-Art-Darstellungen zu erstellen. Diese Demo von Samuel Marchal nutzt diese Technik.

Vorteile

• Wow, man kann Formen mit box-shadow erstellen?

Nachteile

• Es ist wahrscheinlich ziemlich ärgerlich, wenn sich das Bild in Zukunft ändern muss, da die Bearbeitung erfordert, genau zu finden, wo sich dieser Pixelwert in der Eigenschaft box-shadow befindet.
• Bild ist nicht bearbeitbar von Apps wie Illustrator, Photoshop oder Sketch.

Text um Formen wickeln mit shape-outside

Text kann mit der Eigenschaft shape-outside über eine Form wie einen Kreis, eine Ellipse oder ein Polygon fließen. Es ist auch wichtig zu beachten, dass diese Eigenschaft derzeit nur auf gefloatete Elemente angewendet wird, obwohl sich dies in Zukunft wahrscheinlich ändern wird. Hier ist ein einfaches Beispiel

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

Es gibt viele Funktionen, um Formen zu erstellen, um die sich Text fließen lassen kann, wie z. B.: circle(), ellipse(), polygon() und inset(). Vorerst werfen wir nur einen genaueren Blick auf die Funktion ellipse()

Siehe den Pen 7fa99015d63597648d5e312c5b73ac25 von CSS-Tricks (@css-tricks) auf CodePen.

.element {
  shape-outside: ellipse(150px 300px at 50% 50%);
}

Die Funktion ellipse() erfordert die Radienwerte für die x- und y-Achse der Ellipse, gefolgt von den Koordinaten zur Positionierung des Mittelpunkts der Form innerhalb ihres Begrenzungsrahmens. Zum Beispiel positioniert das Beispiel oben den Mittelpunkt der Ellipse in der vertikalen und horizontalen Mitte von .element.

Es gibt jedoch einen wichtigen Haken, den wir identifizieren müssen: Wenn wir shape-outside verwenden, beeinflussen wir in diesem Fall nicht die Form von .element. Was wir stattdessen tun, ist, die Beziehung anderer Elemente um ihn herum zu ändern. Wenn wir dem div einen Rand und einen Hintergrund hinzufügen, werden wir feststellen, dass es immer noch als Rechteck gerendert wird

Siehe den Pen 5e47a80626dfa27a42dd18a0e2b8450b von CSS-Tricks (@css-tricks) auf CodePen.

Es ist vielleicht besser, es so zu sehen: Mit der Eigenschaft shape-outside ändern wir die Beziehung anderer Elemente um ein Element herum, nicht die Geometrie des Elements selbst. Um das zu beheben, müssen wir shape-outside zusammen mit der Eigenschaft clip-path() verwenden, wie in diesem Beispiel

Siehe den Pen 4e5420d8c1a2766b25dd3c98f684bf9c von CSS-Tricks (@css-tricks) auf CodePen.

Es gibt noch viel mehr über die Eigenschaft shape-outside zu erfahren, daher ist es ratsam, sich den Eintrag im Almanac anzusehen.

Vorteile

• Ermöglicht den dynamischen Umfluss von Text, was für reaktionsschnelle Schnittstellen wichtig sein kann.
• Kann den Begrenzungsrahmen auf den Rand, den Innenabstand und den Rahmen setzen. Dies gibt uns eine genaue Kontrolle über die Position dieser Beziehungen.

Nachteile

• Wird von IE oder Firefox nicht unterstützt.
• Ändert nicht die tatsächliche Form des Elements.

clip-path

Wie wir im vorherigen Beispiel mit shape-outside gesehen haben, können wir ähnliche Funktionen mit clip-path verwenden, einschließlich inset(), polygon() und ellipse(). Hier ist ein Beispiel

.element {
  width: 200px;
  height: 200px;
  clip-path: polygon(0% 100%, 100% 100%, 0% 0%);
}

Siehe den Pen 84ce4f54c0d96b1ba0a2e9a9290876fb von CSS-Tricks (@css-tricks) auf CodePen.

Die durch Kommas getrennte Liste definiert die Koordinaten für jeden Punkt in der Form, sodass die ersten beiden Werte, 0 100%, einen Punkt in der unteren linken Ecke unseres div hinzufügen. Als Nächstes fügen wir einen Punkt zur unteren rechten Ecke der Form hinzu und den letzten Punkt in die obere linke Ecke des Elements. Obwohl dies nur ein einfaches Dreieck ist, zeigt dieses Beispiel die Art von Macht, die Entwickler mit dieser neuen Eigenschaft über Formen haben können.

Außerdem ist anzumerken, dass die Eigenschaft clip-path vollständig animierbar ist, solange die gleiche Anzahl von Bedingungen in die Funktion übergeben wird

Siehe den Pen 10c03204463e92a72a6756678e6348d1 von CSS-Tricks (@css-tricks) auf CodePen.

Wenn diese Funktionen etwas verwirrend erscheinen, ist es am besten, mit einem Tool wie Clippy zu experimentieren, um die Syntax zu verstehen

Für weitere Informationen siehe den Almanac-Eintrag für clip-path und Clipping und Masking in CSS.

Vorteile

• Wir können komplexe Formen erstellen, ohne dass ein zusätzliches Asset wie ein Bild benötigt wird.

Nachteile

• Wenn Sie möchten, dass Text um die Form fließt, müssen Sie clip-path in Verbindung mit der Eigenschaft shape-outside verwenden.

SVG

Sie können buchstäblich alles zeichnen, was Ihr Herz begehrt, mit Scalable Vector Graphics, von Konsolen und Logos bis hin zu Icon-Systemen und Social-Media-Buttons.

Es liegt außerhalb des Rahmens dieses Beitrags, auf die Verwendung von SVG so detailliert einzugehen, da es so viele Best Practices und Techniken zu erwähnen gibt. Aber generell, wenn eine Form für ein Projekt benötigt wird, ist meine Standardwahl, ein SVG zu verwenden, da dies weniger verrückten, unvorhersehbaren Code bedeutet, der für die komplizierteren Formen sicherlich erforderlich wäre. Es bedeutet auch, dass Designer die Formen leicht bearbeiten können, wenn sie überarbeitet werden müssen.

Wenn Sie mehr über SVG erfahren möchten, werfen Sie einen Blick auf unser Kompendium an SVG-Informationen.

Vorteile

• Kleine Dateigrößen (wenn Sie sie optimieren).
• Sie können sie in jedem gängigen Grafikeditor zeichnen.
• Personen, die mit CSS oder JavaScript nicht vertraut sind, können sie recht einfach erstellen.
• Sie können auf fast jede Größe skaliert werden, ohne zu verschwimmen.
• Breite Browserunterstützung und viele verfügbare Fallbacks.
• Sie können sie in das Markup einfügen und für Screenreader zugänglich machen.
• Animierbar mit CSS und JS.

Nachteile

• Wenn es sich um sehr einfache Formen handelt, können Sie wahrscheinlich auch eine reine CSS-Methode verwenden.

canvas

Das Element canvas ist besonders nützlich für Diagramme oder interaktive Spiele, da es ursprünglich zum Zeichnen von Grafiken mit JavaScript entwickelt wurde. Leider ist ein Tutorial zu canvas außerhalb des Rahmens dieses Beitrags, aber es ist nützlich zu verstehen, wofür es verwendet werden kann. So könnten wir ein Quadrat mit canvas zeichnen

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#0074d9';
ctx.fillRect(0, 0, 100, 100);

Siehe den Pen 194842e7086d6b740ba102fd3be9c510 von CSS-Tricks (@css-tricks) auf CodePen.

Für jedes canvas müssen wir den String "2d" in die Funktion .getContext() übergeben. Es gibt noch keinen 3D-Kontext, aber dieser könnte in Zukunft implementiert werden.

MDN hat ein großartiges canvas-Tutorial, das es wert ist, erkundet zu werden, wenn Sie daran interessiert sind, wie man Formen mit JavaScript manipuliert.

Vorteile

• Großartig für die Erstellung von Spielen und interaktiven Diagrammen.

Nachteile

• Erfordert JavaScript als Abhängigkeit.

Zusammenfassung

Das Erstellen von Formen im Webdesign ähnelt der Auswahl der besten vertikalen Ausrichtungstechnik: Es gibt keine perfekte Technik, es hängt alles von Ihren Anforderungen ab. In vielen Projekten, an denen ich in letzter Zeit gearbeitet habe, habe ich nicht nur eine Technik gewählt, sondern eine Mischung aus fast allen. Solange alles dokumentiert ist und Sie nicht versuchen, andere Entwickler zu verwirren, können diese Tricks sich gegenseitig ergänzen, um jedes Problem bei der Arbeit mit Formen zu lösen.

Mehr Infos und Ressourcen

• Almanac-Eintrag für clip-path
• Mehr Infos über clip-path
• W3C zu CSS Shapes
• Die Formen von CSS
• Erste Schritte mit CSS Shapes
• Clippy
• Adobe's CSS Shapes CodePen-Kollektion
• Clipping und Masking in CSS
• Border-radius: 50 % vs. 100 %
• Wie Sie mit CSS-Shapes beginnen
• Shapes Editor Chrome-Erweiterung
• Canvas-Tutorial auf MDN
• Ein Kompendium an SVG-Informationen