CSS shapes
Das CSS shapes Modul beschreibt geometrische Formen. Es definiert auch CSS-Eigenschaften, die die Formen verwenden können, um die Geometrie des Fließbereichs eines Elements zu steuern; dieser Bereich kann dann auf Ausschlüsse angewendet werden oder den Inhaltsbereich eines Elements angeben.
Die Spezifikation definiert mehrere Möglichkeiten, Formen zu erstellen. Inhalte können um oder innerhalb einer Form herum angeordnet werden, anstatt der Standardrechteckform des Elementkastens zu folgen.
Formen definieren Geometrien, die als CSS-Werte verwendet werden können. Dieses Modul bietet Funktionen zum Erstellen von Ellipsen, Polygonen und beliebigen Geometrien. Andere CSS-Module können die in dieser Spezifikation definierten Formen nutzen, einschließlich CSS motion path und CSS masking.
CSS shapes in Aktion
Das folgende Beispiel zeigt ein Bild, das links geschwebt wurde, und die shape-outside Eigenschaft mit einem Wert von circle(50%) angewendet. Dies erzeugt eine Kreisform, und der Inhalt, der das Schweben umschließt, umgibt nun diese Form. Dies verändert die Länge der umschlossenen Textzeilenboxen.
Referenz
Eigenschaften
Hinweis: Das CSS shapes Modul führt die Eigenschaften shape-inside und shape-padding ein, die noch nicht implementiert sind.
Datentypen
Funktionen
Begriffe
Leitfäden
- Überblick über Formen
-
Definition von grundlegenden Formen mit den Eigenschaften
shape-marginundclip-pathund Debugging von grundlegenden Formen mit den Entwicklertools. - Formen aus Box-Werten
-
Verwendung von
border-radiusKrümmungen und CSS-Boxmodellwerten zur Erstellung von Formen. - Grundlegende Formen mit
shape-outside -
Erstellen von Rechtecken, Kreisen, Ellipsen und Polygonen mit CSS-Formen, der Referenzbox und der
shape-outsideEigenschaft. - Formen aus Bildern
-
Erstellung von Formen aus halbtransparenten Bilddateien und CSS-Verläufen.
Verwandte Konzepte
Modul CSS motion path
Modul CSS masking
Modul CSS backgrounds and borders
border-radiusKurzform
Modul CSS box model
<box-edge>Datentyp
Spezifikationen
| Specification |
|---|
| CSS Shapes Module Level 1 |
| CSS Shapes Module Level 2 |
Siehe auch
- CSS Shapes Ressourcen
- CSS Shapes 101 über alistapart.com (2014)
- Erstellung nicht-rechteckiger Layouts mit CSS Shapes über sarasoueidan.com (2013)
- Anleitung zur Verwendung von CSS Shapes im Webdesign über tutsplus.com (2016)
- Anleitung zum Einstieg mit CSS Shapes über webdesignerdepot.com (2015)
- CSS-Formen mit dem Formpfad-Editor bearbeiten über mozilla.org (2018) (Video)