Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit CSS-Formen

Inhalte um benutzerdefinierte Pfade zusammenfassen

Razvan Caliman

Lange Zeit sind Webdesignschaffende gezwungen, bei der Erstellung von Designs die Grenzen des Rechtecks einzuhalten. Die meisten Inhalte im Web befinden sich immer noch in einfachen Feldern, weil die meisten kreativen Köpfe bei einem nicht rechteckigen Layout frustrierend sind. Das wird sich mit der Einführung von CSS-Formen ändern, die ab Chrome 37 verfügbar sind. CSS-Formen ermöglichen es Webdesignern, Inhalte um benutzerdefinierte Pfade wie Kreise, Ellipsen und Polygone zu brechen und so die Einschränkungen des Rechtecks zu überwinden.

Formen können manuell definiert oder aus Bildern abgeleitet werden.

Sehen wir uns ein sehr einfaches Beispiel an.

Vielleicht waren Sie so naiv wie ich, als Sie zum ersten Mal ein Bild mit transparenten Teilen schwebten, in dem Sie erwartet haben, dass der Inhalt die Lücken ein- und ausfüllt, nur um von der rechteckigen Wickelform enttäuscht zu sein, die um das Element herum vor sich blieb. CSS-Formen können dieses Problem lösen.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

Die CSS-Deklaration shape-outside: url(image.png) weist den Browser an, eine Form aus dem Bild zu extrahieren.

Die Eigenschaft shape-image-threshold definiert die minimale Deckkraft von Pixeln, die zum Erstellen der Form verwendet wird. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (völlig undurchsichtig) liegen. shape-image-threshold: 0.5 bedeutet also, dass nur Pixel mit einer Deckkraft von 50% und mehr zur Erstellung der Form verwendet werden.

Das Attribut float ist hier entscheidend. Die Eigenschaft shape-outside definiert zwar die Form des Bereichs, um den Inhalt umgebrochen wird (ohne Gleitkommazahl), Sie sehen die Auswirkungen der Form nicht.

Elemente haben einen Pufferbereich auf der gegenüberliegenden Seite ihres float-Werts. Wenn beispielsweise ein Element mit einem Bild einer Kaffeetasse nach links geschoben wird, wird der Pufferbereich rechts neben der Tasse erstellt. Auch wenn Sie ein Bild mit Lücken auf beiden Seiten erstellen können, wird der Inhalt nur um die Form auf der gegenüberliegenden Seite gelegt, die durch die Eigenschaft Gleitkommazahl angegeben wird, links oder rechts, nie beide.

Künftig wird es dank der Einführung von CSS-Ausschlüssen möglich sein, shape-outside für Elemente zu verwenden, die nicht als „Float“ fungieren.

Formen manuell erstellen

Sie können Formen nicht nur aus Bildern extrahieren, sondern auch manuell codieren. Zum Erstellen von Formen können Sie aus folgenden funktionalen Werten wählen: circle(), ellipse(), inset() und polygon(). Jede Formfunktion akzeptiert einen Satz von Koordinaten und ist mit einem Referenzfeld gekoppelt, das das Koordinatensystem festlegt. Weitere Informationen zu Referenzfeldern

Die Funktion Kreis()

Abbildung des Werts für die Form „Circle()“

Die vollständige Notation für einen Kreisformwert ist circle(r at cx cy), wobei r der Radius des Kreises ist, während cx und cy Koordinaten des Kreismittelpunkts auf der X-Achse und der Y-Achse sind. Die Koordinaten für den Mittelpunkt des Kreises sind optional. Wenn Sie sie weglassen, wird der Mittelpunkt des Elements (der Schnittpunkt seiner Diagonalen) als Standardwert verwendet.

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

Im Beispiel oben wird der Inhalt von der Außenseite eines kreisförmigen Pfades umschlossen. Das einzelne Argument 50% gibt den Radius des Kreises an, der in diesem speziellen Fall der Hälfte der Breite oder Höhe des Elements entspricht. Wenn Sie die Abmessungen des Elements ändern, wirkt sich das auf den Radius der Kreisform aus. Dies ist ein einfaches Beispiel dafür, wie CSS-Formen responsiv sein können.

Bevor wir fortfahren, ein paar Worte: Denken Sie daran, dass CSS-Formen nur die Form des Floating-Bereichs um ein Element beeinflussen. Hat das Element einen Hintergrund, wird dieser nicht von der Form abgeschnitten. Um diesen Effekt zu erzielen, müssen Sie die Eigenschaften der CSS-Maskierung verwenden, also entweder clip-path oder mask-image. Die Eigenschaft clip-path ist sehr praktisch, da sie der gleichen Notation wie CSS-Formen folgt, sodass Sie Werte wiederverwenden können.

Illustration der Form „circle()“ und „clip-path“

In den Abbildungen in diesem Dokument wird die Form mithilfe von Beschnitten hervorgehoben, damit Sie die Effekte besser verstehen können.

Zurück zur Kreisform.

Wenn für den Kreisradius Prozentsätze verwendet werden, wird der Wert mit einer etwas komplexeren Formel berechnet: Quadratwurzel(Breite^2 + Höhe^2) / Quadrat(2). Dies ist hilfreich, da Sie sich so vorstellen können, wie die daraus entstehende Kreisform aussehen würde, wenn die Abmessungen des Elements nicht identisch sind.

Alle CSS-Einheitstypen können in Formfunktionskoordinaten verwendet werden: px, em, rem, vw, vh usw. Wählen Sie das Modell aus, das flexibel oder starr genug ist.

Sie können die Position des Kreises anpassen, indem Sie explizite Werte für die Koordinaten seines Mittelpunkts festlegen.

.element{
  shape-outside: circle(50% at 0 0);
}

Dadurch wird der Mittelpunkt des Kreises am Ursprung des Koordinatensystems positioniert. Was ist das Koordinatensystem? Hier werden Referenzfelder eingeführt.

Referenzfelder für CSS-Formen

Das Referenzfeld ist ein virtueller Rahmen um das Element, der das Koordinatensystem festlegt, mit dem die Form gezeichnet und positioniert wird. Der Ursprung des Koordinatensystems befindet sich in der oberen linken Ecke, wobei die X-Achse nach rechts und die Y-Achse nach unten zeigt.

shape-outside ändert die Form des Pufferbereichs, um den Inhalt umgebrochen wird. Der Pufferbereich erstreckt sich bis zu den äußeren Rändern der Box, die durch die Eigenschaft margin definiert werden. Dies wird als margin-box bezeichnet und ist das Standardreferenzfeld für eine Form, wenn nicht explizit angegeben ist.

Die folgenden beiden CSS-Deklarationen führen zu identischen Ergebnissen:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Für das Element wurde noch keine Marge festgelegt. Es kann davon ausgegangen werden, dass sich der Ursprung des Koordinatensystems und der Mittelpunkt des Kreises in der oberen linken Ecke des Inhaltsbereichs des Elements befinden. Das ändert sich, wenn Sie eine Gewinnmarge festlegen:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

Der Ursprung des Koordinatensystems liegt nun außerhalb des Inhaltsbereichs des Elements (100 Pixel oben und 100 Pixel links), ebenso wie der Mittelpunkt des Kreises. Der berechnete Wert des Kreisradius wird auch größer, um die größere Oberfläche des Koordinatensystems zu berücksichtigen, das durch das Referenzfeld margin-box festgelegt wurde.