Diese Seite wurde von der Cloud Translation API übersetzt.

Erste Schritte mit CSS-Formen

Inhalte um benutzerdefinierte Pfade umschließen

Razvan Caliman

Lange Zeit mussten Webdesigner innerhalb der Grenzen des Rechtecks arbeiten. Die meisten Inhalte im Web sind immer noch in einfachen Feldern gefangen, da die meisten Creatives in ein nicht rechteckiges Layout stecken und frustriert 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 wickeln und so die Einschränkungen des Rechtecks aufheben.

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

Sehen wir uns ein sehr einfaches Beispiel an.

Vielleicht waren Sie auch so naiv wie ich, als Sie zum ersten Mal ein Bild mit transparenten Bereichen als „Floating“-Element eingefügt haben und erwartet haben, dass der Inhalt umgebrochen wird und die Lücken füllt. Stattdessen wurden Sie von der rechteckigen Umbruchform enttäuscht, die um das Element herum verbleibt. Mit CSS-Formen lässt sich 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.

Mit der Property shape-image-threshold wird die minimale Deckkraft der Pixel definiert, die zum Erstellen der Form verwendet werden. Der Wert muss 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.

Die Property float ist hier der Schlüssel. Die Property shape-outside definiert die Form des Bereichs, um den sich Inhalte umbrechen. Ohne das Attribut „float“ sind die Auswirkungen der Form jedoch nicht zu sehen.

Elemente haben einen Schwebebereich auf der gegenüberliegenden Seite ihres float-Werts. Wenn ein Element mit einem Bild einer Kaffeetasse beispielsweise nach links verschoben wird, wird der Floating-Bereich rechts neben der Tasse erstellt. Obwohl Sie ein Bild mit Lücken auf beiden Seiten erstellen können, umschließen die Inhalte nur die Form auf der gegenüberliegenden Seite, die durch die Gleitkommaeigenschaft bezeichnet wird, links oder rechts, niemals beide.

Mit der Einführung von CSS-Ausschlüssen können Sie shape-outside künftig auch für Elemente verwenden, die nicht freigesetzt sind.

Formen manuell erstellen

Sie können Formen nicht nur aus Bildern extrahieren, sondern auch manuell codieren. Zum Erstellen von Formen stehen einige Funktionswerte zur Auswahl: circle(), ellipse(), inset() und polygon(). Jede Formfunktion akzeptiert eine Reihe von Koordinaten und wird mit einem Referenzfeld kombiniert, das das Koordinatensystem festlegt. Weitere Informationen zu Referenzfeldern folgen gleich.

Die Funktion circle()

Die vollständige Schreibweise für einen Kreisformwert lautet 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 Mittelpunkt des Kreises sind optional. Wenn Sie sie weglassen, wird standardmäßig der Mittelpunkt des Elements (die Schnittpunkte der Diagonalen) verwendet.

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

Im obigen Beispiel wird der Inhalt um einen kreisförmigen Pfad herum gewickelt. 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, eine kurze Anmerkung: Denken Sie daran, dass CSS-Formen nur die Form des Floating-Bereichs um ein Element beeinflussen. Hat das Element einen Hintergrund, wird dieser nicht durch die Form abgeschnitten. Um diesen Effekt zu erzielen, müssen Sie Eigenschaften aus 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.

Abbildung der Form „circle()“ mit Clip-Path

In den Abbildungen in diesem Dokument wird die Form durch Ausschneiden hervorgehoben, um die Auswirkungen besser zu veranschaulichen.

Zurück zur Kreisform.

Wenn Sie Prozentsätze für den Kreisradius verwenden, wird der Wert mit einer etwas komplexeren Formel berechnet: sqrt(width^2 + height^2) / sqrt(2). Das ist hilfreich, weil Sie sich so vorstellen können, wie die resultierende Kreisform aussehen wird, wenn die Abmessungen des Elements nicht gleich sind.

Alle CSS-Einheiten können in den Koordinaten der Formfunktion verwendet werden, z. B. px, em, rem, vw und vh. Sie können diejenige auswählen, die für Ihre Anforderungen 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 führen wir Referenzfelder ein.

Referenzfelder für CSS-Formen

Das Referenzfeld ist ein virtueller Rahmen um das Element. Es legt das Koordinatensystem fest, das zum Zeichnen und Positionieren der Form verwendet wird. 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 Floating-Bereichs ändert, um den die Inhalte umgebrochen werden. Der Schwebebereich erstreckt sich bis zu den äußeren Rändern des durch die Property margin definierten Felds. Dieser wird als margin-box bezeichnet und ist das Standardbezugsfeld für eine Form, wenn keines explizit erwähnt wird.

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;
}

Wir haben noch keinen Rand für das Element festgelegt. An dieser Stelle kann davon ausgegangen werden, 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 Mittelpunkt des Kreises. Der berechnete Wert des Kreisradius wird ebenfalls entsprechend der größeren Oberfläche des Koordinatensystems angepasst, die vom Referenzfeld margin-box festgelegt wurde.