CSS-Formen
Das CSS-Formen-Modul beschreibt geometrische Formen. Es definiert auch CSS-Eigenschaften, die die Formen verwenden können, um die Geometrie des Floßbereichs eines Elements zu steuern; dieser Bereich kann dann auf Ausschlüsse angewendet oder als Inhaltsbereich eines Elements spezifiziert werden.
Die Spezifikation definiert mehrere Möglichkeiten zur Erstellung von Formen. Inhalte können um eine Form herum oder innerhalb einer Form angeordnet werden, anstatt der standardmäßigen rechteckigen Form des Element-Boxmodells zu folgen.
Formen definieren Geometrien, die als CSS-Werte genutzt werden können. Dieses Modul stellt Funktionen zur Erstellung von Ellipsen, Polygonen und beliebigen Geometrien bereit. Andere CSS-Module können die in dieser Spezifikation definierten Formen nutzen, einschließlich CSS motion path und CSS masking.
CSS-Formen in Aktion
Das folgende Beispiel zeigt ein Bild, das nach links gefloatet wurde, wobei die Eigenschaft shape-outside
mit einem Wert von circle(50%)
angewendet wurde. Dies erzeugt eine Kreisform, und der den Float umgebende Inhalt wird nun um diese Form herum angeordnet. Dies ändert die Länge der Zeilenboxen des umgebenden Textes.
<div class="box">
<img
alt="A hot air balloon"
src="https://mdn.github.io/shared-assets/images/examples/round-balloon.png" />
<p>
One November night in the year 1782, so the story runs, two brothers sat
over their winter fire in the little French town of Annonay, watching the
grey smoke-wreaths from the hearth curl up the wide chimney. Their names
were Stephen and Joseph Montgolfier, they were papermakers by trade, and
were noted as possessing thoughtful minds and a deep interest in all
scientific knowledge and new discovery. Before that night—a memorable night,
as it was to prove—hundreds of millions of people had watched the rising
smoke-wreaths of their fires without drawing any special inspiration from
the fact.
</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
img {
float: left;
shape-outside: circle(50%);
}
Referenz
Eigenschaften
Hinweis: Das CSS-Formenmodul führt die Eigenschaften shape-inside
und shape-padding
ein, die noch nicht implementiert wurden.
Datentypen
Funktionen
Begriffe
Leitfäden
- Übersicht über Formen
-
Definition grundlegender Formen mit den Eigenschaften
shape-margin
undclip-path
und Debugging grundlegender Formen mit Entwicklerwerkzeugen. - Formen aus Box-Werten
-
Verwendung von
border-radius
-Krü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 Eigenschaft
shape-outside
. - Formen aus Bildern
-
Erstellen von Formen aus halbdurchsichtigen Bilddateien und CSS-Verläufen.
Verwandte Konzepte
CSS motion path Modul
CSS masking Modul
CSS hintergründe und rahmen Modul
border-radius
Kurzschreibweise
CSS-Boxmodell Modul
<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)
- Erstellen nicht-rechteckiger Layouts mit CSS Shapes über sarasoueidan.com (2013)
- Anleitung zur Verwendung von CSS Shapes im Webdesign über tutsplus.com (2016)
- Einstieg in CSS Shapes über webdesignerdepot.com (2015)
- Bearbeiten von CSS-Formen mit dem Shape Path Editor über mozilla.org (2018) (Video)