Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Erste Schritte mit CSS-Formen

Inhalt um benutzerdefinierte Pfade umbrechen

Razvan Caliman

Lange Zeit waren Webdesigner gezwungen, innerhalb der Grenzen des Rechtecks zu gestalten. Die meisten Inhalte im Web sind immer noch in einfachen Boxen gefangen, weil die meisten kreativen Versuche, ein nicht rechteckiges Layout zu erstellen, in Frustration enden. Das wird sich mit der Einführung von CSS-Formen ändern, die ab Chrome 37 verfügbar sind. Mit CSS-Formen können Webdesigner Inhalte um benutzerdefinierte Pfade wie Kreise, Ellipsen und Polygone herum anordnen und so die Einschränkungen des Rechtecks überwinden.

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

Sehen wir uns ein ganz einfaches Beispiel an.

Vielleicht waren Sie so naiv wie ich, als Sie zum ersten Mal ein Bild mit transparenten Teilen eingefügt haben, und haben erwartet, dass der Inhalt die Lücken füllt. Sie wurden dann aber enttäuscht, weil die rechteckige Form um das Element herum bestehen blieb. Dieses Problem lässt sich mit CSS-Formen 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.

Mit dem Attribut shape-image-threshold wird die Mindestdeckkraft von Pixeln definiert, die zum Erstellen der Form verwendet werden. Der Wert muss im Bereich zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. shape-image-threshold: 0.5 bedeutet also, dass nur Pixel mit einer Deckkraft von mindestens 50 % zum Erstellen der Form verwendet werden.

Das Attribut float ist hier entscheidend. Die Property shape-outside definiert zwar die Form des Bereichs, um den der Inhalt umbrochen wird, aber ohne die Float-Property sind die Auswirkungen der Form nicht sichtbar.

Elemente haben einen Float-Bereich auf der gegenüberliegenden Seite ihres float-Werts. Wenn beispielsweise ein Element mit dem Bild einer Kaffeetasse links angeordnet wird, wird der Float-Bereich rechts neben der Tasse erstellt. Auch wenn Sie ein Bild mit Lücken auf beiden Seiten erstellen können, wird der Inhalt nur auf der gegenüberliegenden Seite, die durch die Float-Eigenschaft festgelegt ist, um die Form herumgeführt, also links oder rechts, aber nie auf beiden Seiten.

In Zukunft wird es möglich sein, shape-outside für Elemente zu verwenden, die nicht mit der Einführung von CSS-Ausschlüssen verschoben werden.

Formen manuell erstellen

Sie können Formen nicht nur aus Bildern extrahieren, sondern auch manuell codieren. Sie können aus einigen funktionalen Werten wählen, um Formen zu erstellen: circle(), ellipse(), inset() und polygon(). Jede Formfunktion akzeptiert eine Reihe von Koordinaten und wird mit einer Referenzbox kombiniert, die das Koordinatensystem festlegt. Mehr zu Referenzfeldern gleich.

Die Funktion circle()

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

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

Im obigen Beispiel wird der Inhalt um die Außenseite eines kreisförmigen Pfads herumgeführt. Das einzelne Argument 50% gibt den Radius des Kreises an, der in diesem 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 kurzer Hinweis: Es ist wichtig, daran zu denken, dass CSS-Formen nur die Form des Float-Bereichs um ein Element herum beeinflussen. Wenn das Element einen Hintergrund hat, wird dieser nicht durch die Form abgeschnitten. Um diesen Effekt zu erzielen, müssen Sie Eigenschaften aus CSS Masking verwenden – entweder clip-path oder mask-image. Die Property clip-path ist sehr praktisch, da sie dieselbe Notation wie CSS-Formen verwendet. Sie können also Werte wiederverwenden.

Abbildung der Form „circle()“ + „clip-path“

In den Abbildungen in diesem Dokument wird Clipping verwendet, um die Form hervorzuheben und die Effekte zu verdeutlichen.

Zurück zur Kreisform.

Wenn Sie Prozentwerte für den Kreisradius verwenden, wird der Wert tatsächlich mit einer etwas komplexeren Formel berechnet: sqrt(width^2 + height^2) / sqrt(2). Das ist hilfreich, um sich vorzustellen, wie die resultierende Kreisform aussieht, wenn die Abmessungen des Elements nicht gleich sind.

Alle CSS-Einheitentypen können in den Koordinaten der Formfunktion verwendet werden – px, em, rem, vw, vh usw. Sie können die Option auswählen, die flexibel oder starr genug für Ihre Anforderungen ist.

Sie können die Position des Kreises anpassen, indem Sie explizite Werte für die Koordinaten des 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 kommen Referenzboxen ins Spiel.

Referenzboxen für CSS-Formen

Das Referenzfeld ist ein virtuelles Feld um das Element, das das Koordinatensystem zum Zeichnen und Positionieren der Form festlegt. Der Ursprung des Koordinatensystems befindet sich in der oberen linken Ecke. Die X-Achse zeigt nach rechts und die Y-Achse nach unten.

Denken Sie daran, dass shape-outside die Form des Float-Bereichs ändert, um den der Inhalt umbrochen wird. Der Float-Bereich erstreckt sich bis zu den äußeren Rändern des Felds, das durch die Property margin definiert wird. Dies wird als margin-box bezeichnet und ist die Standardreferenzbox für eine Form, wenn keine explizit angegeben ist.

Die folgenden beiden CSS-Deklarationen haben identische Ergebnisse:

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

Wir haben noch keinen Außenabstand für das Element festgelegt. An dieser Stelle können wir davon ausgehen, dass sich der Ursprung des Koordinatensystems und der Kreismittelpunkt in der oberen linken Ecke des Inhaltsbereichs des Elements befinden. Das ändert sich, wenn Sie einen Rand festlegen:

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

Der Ursprung des Koordinatensystems liegt jetzt außerhalb des Inhaltsbereichs des Elements (100 px nach oben und 100 px nach links), ebenso wie der Kreismittelpunkt. Der berechnete Wert des Kreisradius wird ebenfalls erhöht, um die größere Fläche des Koordinatensystems zu berücksichtigen, das durch die Referenzbox margin-box festgelegt wird.