Denken Sie mit CSS Shape-Outside über den Tellerrand hinaus

CSS basiert auf einem Box-Modell. Wenn Sie ein Bild haben, das ein Kreis ist, um den Sie Text umbrechen möchten, wird es um den Begrenzungsrahmen der Bilder gewickelt.

Form außen

Mit einer neuen CSS-Eigenschaft namens Shape-Outside können Sie Text umbrechen, der der Form Ihres Bildes entspricht.

Was ist Form außerhalb

Shape-Outside ist eine neue CSS-Eigenschaft, die die Form von umbrochenen Elementen ändert. Anstatt sich auf einen rechteckigen Begrenzungsrahmen um das Bild zu beschränken, können wir mit der Form außerhalb den Inhalt so gestalten, dass er zum Bild passt.

So beschreibt MDN die Form außerhalb:

Die CSS-Eigenschaft außerhalb der Form verwendet Formwerte, um den Float-Bereich für einen Float zu definieren, und bewirkt, dass Inline-Inhalte anstelle des Begrenzungsrahmens des Floats um die Form gewickelt werden.

Der wichtigste Aspekt dieser Beschreibung ist, dass diese neue Eigenschaft für Bilder gilt, die einen Float verwenden. Die CSS-Eigenschaft "Form außerhalb" steuert, wie Text um ein schwebendes Bild gewickelt wird. Der umbrochene Text kann die Form eines Kreises, einer Ellipse, eines Rechtecks ​​oder eines Polygons annehmen.

Mit Shape-Outside

Die Form-Außen-Eigenschaft nimmt eine „Grundform“ an und wendet eine Formfunktion darauf an. Die Formfunktion wird verwendet, um die Form des Gleitbereichs der Form zu ändern. Die CSS-Eigenschaft "Form außerhalb" bietet Funktionen zum Erstellen dieser Formfunktionen:

  • Kreis
  • Ellipse
  • Polygon
  • Rechteck
  • URL

Das Bild kann mit diesen Werten positioniert werden. Die Werte werden an das Ende angehängt:

  • Randbox
  • Polsterbox
  • Rahmen

Das Bild muss intrinsische Abmessungen haben. Sie müssen die Höhe und Breite des Elements festlegen. Dies wird von der Formfunktion verwendet, um ein Koordinatensystem zu erstellen, das beim Umbrechen des Bildes mit Text verwendet wird.

Kreis

Circle () ist einer der Funktionswerte, die mit Shape-Outside bereitgestellt werden. Die vollständige Notation für circle () ist circle (r bei cx cy), wobei r der Radius des Kreises und cx und cy die Koordinaten für den Mittelpunkt des Kreises sind. Wenn Sie sie weglassen, wird die Bildmitte als Standardwert verwendet.

Hier ist ein Beispiel für die Verwendung von Shape-Outside auf einem Kreis:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

Ellipse

Die Ellipse ist eine Variation des Kreises, in dem das Objekt entweder um die horizontale oder die vertikale Achse verlängert ist. Die vollständige Notation für Ellipse () ist Ellipse (rx ry bei cx cy), wobei rx und ry die Radien für die Ellipse sind und cx und cy die Koordinaten für den Mittelpunkt der Ellipse sind.

Hier ist ein Beispiel für die Verwendung von Shape-Outside auf der Ellipse:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

Polygon

Die Polygonfunktion bietet eine unbegrenzte Auswahl an Formen. Die vollständige Notation für Polygon () lautet Polygon (x1 y1, x2 y2,…)Dabei gibt jedes Paar die xy-Koordinaten für einen Scheitelpunkt des Polygons an. Um die Funktion polygon () verwenden zu können, müssen Sie mindestens 3 Scheitelpunktpaare angeben.

Polygon wird mit einem Clip-Pfad verwendet. Die Clip-Path-CSS-Eigenschaft erstellt einen Beschneidungsbereich, der definiert, welcher Teil eines Elements angezeigt werden soll. Alles innerhalb der Region wird angezeigt, während die außerhalb verborgen sind.

Hier ist ein Beispiel für die Verwendung von Shape-Outside zum Erstellen von zwei Dreiecksformen, zwischen denen der Text fließt:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Browser-Unterstützung

Die CSS-Form außerhalb wird hauptsächlich von Chrome, Opera und Safari unterstützt.

Holen Sie sich den Code

Den Code für alle Beispiele finden Sie in meinem Github-Repo hier.

Weitere Artikel

Vielen Dank für das Lesen meines Artikels. Wenn es Ihnen gefällt, klicken Sie bitte auf das Klatschsymbol unten, damit andere den Artikel finden. Hier sind einige meiner Artikel, die Sie interessieren könnten:

Hier sind 5 Layouts, die Sie mit FlexBox erstellen können

Breite Erste Suche in JavaScript

Instanziierungsmuster in JavaScript