So verwenden Sie CSS-Shapes in Ihrem Webdesign

Die Layoutprinzipien - Spalten und Zeilen, Winkel und Linien -, die wir heute zum Erstellen von Websites verwenden, werden weitgehend von ihrer Druckkultur beeinflusst. Auch wenn die Rasterimplementierung im Web immer besser und aufpolierter wird, ist das Weblayout im Vergleich zu Printmedien im Allgemeinen immer noch unangenehm, insbesondere beim Inhalt.

Zeitschriften und Zeitungen hatten schon immer eine elegante Möglichkeit, das Layout von Inhalten zu gestalten, z. B. das Umwickeln von Text oder nicht rechteckige Formen.

Multipurpose Magazine von GreenSocks

Lassen Sie uns herausfinden, wie das CSS Shapes-Modul diese Freiheit im Web ermöglicht.

Schnelle Einführung in CSS-Shapes

Mit CSS-Formen können Webdesigner abstraktere, geometrischere Layouts erstellen, die über einfache Rechtecke und Quadrate hinausgehen. Die Spezifikation liefert uns neue CSS-Eigenschaften, darunter Form außen und Formrand. Die Browser-Unterstützung ist angemessen, obwohl diese Eigenschaften derzeit nur in Chrome, Opera und Safari verfügbar sind -Webkit- Präfix daher -Webkit-Form-Außen.

Das Form außen Diese Eigenschaft bewirkt, dass der Inline-Inhalt (außerhalb) der Elementkurve und nicht dem Rahmenmodell folgt. Anfangs gab es auch Innenform den Inhalt in ein Element einwickeln; Text innerhalb eines kreisförmigen Elements würde ebenfalls in eine Kreisform gebracht. Die Implementierung wurde jedoch für CSS Shapes Level 2 verschoben.

Von oben nach unten: Form Außen und Form Innen in Aktion.

Das Formrand Diese Eigenschaft legt den Rand um die Form fest, die die verwendet Form außen.

Schauen wir uns einige Beispiele an.

Eine Form erstellen

Der einfachste Weg, um herauszufinden, wie CSS Shapes funktioniert, ist wahrscheinlich das Erstellen eines Kreises. Also hier ist ein div (unser Kreis), neben einigen Absätzen.

Lorem ipsum…

Hier einige grundlegende Gestaltungsmöglichkeiten, einschließlich der Breite und Höhe unseres Kreises Grenzradius um das Element zu gestalten, und ein Float, damit der Absatz das Element umgibt.

.Kreis Breite: 250px; Höhe: 250px; Hintergrundfarbe: # 40a977; Grenzradius: 50%; Schwimmer: links;

Wie wir möchten, sind die Absätze nun um das Element gewickelt. Da die Rand-Radius-Eigenschaft jedoch nicht die tatsächliche Elementform definiert, bildet der Absatzumbruch keine Kreiskurve.

Wenn wir das Element durch unseren Browser DevTools prüfen, werden wir feststellen, dass das Element tatsächlich immer noch eine Box ist. Obwohl unser Div wie ein Kreis aussieht, ist das Grenzradius hat nichts mit dem gemacht tatsächlich Form des Elements.

Beachten Sie die rechteckige Hervorhebung um das Element.

Damit sich unser Absatz an der Kreisform halten kann, müssen wir den Absatz ändern tatsächlich Elementform durch die Form außen Eigentum; In diesem Fall fügen wir einen mit hinzu Kreis() Funktion als Wert übergeben.

.Kreis Breite: 250px; Höhe: 250px; Hintergrundfarbe: # 40a977; Grenzradius: 50%; Schwimmer: links; -webkit-shape-outside: circle (); Form außerhalb: Kreis ();

Unsere Absätze wickeln sich jetzt sauber um den Umfang des Kreises.

Wenn wir das Element nun mit DevTools untersuchen, werden wir außerdem feststellen, dass das Element ordnungsgemäß als Kreis dargestellt wird.

Beachten Sie die dunklere Markierung.

Sehen Sie sich bei einigen Rändern an, wie ein einfaches Layout verbessert werden könnte:

Den Kreis anpassen

Das Kreis() Die Funktion benötigt einige Werte zur Definition der Radius und das Mittelpunktskoordinate beziehungsweise: Kreis (r bei x y). Standardmäßig wird der Radiuswert von der Elementgröße abgeleitet. wenn das Element ist 300px breit zum Beispiel wird der Radius sein 150px (der Radius ist die Hälfte des Kreisdurchmessers).

Ebenso die x und y Koordinaten werden relativ zur Größe des Elements gemessen und sind standardmäßig auf festgelegt 50% 50%; genau in der Mitte des Elements.

Der Kreis befindet sich in der Mitte des Elements.

Diese beiden Werte sind nützlich, wenn Sie die Größe der Form ändern, die tatsächliche Elementgröße beibehalten oder die Form verschieben möchten, während die Elementposition beibehalten wird. Im folgenden Beispiel reduzieren wir den Kreisradius auf 60px und legen Sie die Mittelpunktskoordinate auf 30% 70%, Dies sollte den Kreis nach links unten in der Elementbox verschieben.

Die Absätze passen jetzt durch Die Elementbox folgt der Kreisgröße. Demo ansehen.

Es ist erwähnenswert, dass beim Ändern des Kreises sowohl die Mittelpunktskoordinate als auch der Radius explizit definiert werden müssen. Das Hinzufügen von nur einem von ihnen ist ungültig.

Kreis (60px bei 30% 70%) // richtig. Kreis (60px) // ungültig. Kreis (bei 30% 70%) // ungültig.

Formkastenmodell

CSS-Shapes erben dasselbe Kastenmodell Prinzip als Element, wird jedoch außerhalb des Geltungsbereichs des Elements selbst angewendet. Dies ermöglicht es uns, das Element separat einzustellen, zum Beispiel auf Border-Box beim Einstellen der Form auf Polsterbox. Um die Form zu ändern Kastenmodell, füge einen der hinzu Kastenmodell Schlüsselwörter, Inhaltsfeld, Margin-Box, Border-Box, oder Polsterbox nach der funktion.

.Kreis Breite: 250px; Höhe: 250px; Hintergrundfarbe: # 40a977; Grenzradius: 50%; Schwimmer: links; Polsterung: 10px; Rahmen: 20px fest #ccc; Marge: 30px; -webkit-shape-outside: circle () padding-box; Form außerhalb: Kreis () Polsterbox;

Das Standard-Boxmodell der Form ist auf festgelegt Margin-Box. Und im folgenden Beispiel haben wir es geändert Polsterbox Um dem Browser mitzuteilen, dass er den Elementrand beim Bestimmen der Formgröße oder -spanne ausschließen soll. Jetzt sollten wir finden, dass der Absatz die Grenze passiert und die Auffüllung des Elements sofort berührt.

Das orange Quadrat ist der Rand, das gelbe Quadrat ist der Rand und das grüne Quadrat ist die Auffüllung,

Ich empfehle Ihnen dringend, unseren kostenlosen Kurs über die Grundlagen des CSS-Boxmodells zu lesen, um mehr darüber zu erfahren, wie das Boxmodell im Detail funktioniert.

Weitere Formen erstellen

Die CSS Shapes-Spezifikation enthält einige weitere Formfunktionen:

Ellipse(): Wie der Name schon sagt, erzeugt diese Funktion eine Ellipsenform. Wir können den Ellipsenradius konfigurieren und die Mittelpunktskoordinate der Form verschieben. Aber anders als das Kreis() Funktion, die Ellipse() Die Funktion wendet zwei Radiusmessungen an, horizontal und vertikal Ellipse (100px 180px bei 10% 20%).
Polygon (): Diese Funktion ermöglicht es uns, komplexere Formen wie Dreiecke, Sechsecke sowie nicht geometrische Formen zu erstellen. Die Verwendung von Polygonen ist nicht so einfach wie das Erstellen eines Kreises, aber das Werkzeug "Pfad zum Polygon-Konverter" macht es etwas intuitiver.

Einpacken

In diesem Tutorial haben wir uns mit der grundlegenden Anwendung von CSS Shapes befasst. Wir haben eine Form erstellt, die Größe, Position und Größe angepasst Kastenmodell. Zum Zeitpunkt des Schreibens sind einige Aspekte von CSS-Shapes an den Rändern immer noch sehr rau, weshalb wir es wahrscheinlich noch nicht weit verbreitet sehen.

Wie bereits in diesem Tutorial erwähnt, werden die CSS-Shapes verwendet Innenform Die Eigenschaft, mit der wir Inhalte in ein Element einwickeln und gestalten können, wurde auf Eis gelegt.
Die CSS-Shapes-Spezifikation bietet eine separate Eigenschaft mit dem Namen Formkasten Um das Shape-Box-Modell zu definieren, scheint es derzeit für jeden Browser nicht anwendbar zu sein.
Safari erfordert die -Webkit- Präfix, wobei hervorgehoben wird, dass diese Funktion experimentell ist.

Trotz des langsamen Fortschritts und der Ungleichheit der Browser im Moment freue ich mich auf CSS Shapes! Sobald die großen Browser sie gefunden haben, kann ich es kaum erwarten, einige wirklich kreative Layouts im Web zu sehen!

Web-Design