CSS Academy · Lektion

shape-outside für Textumfluss

Lassen Sie Text mit shape-outside bei gefloateten Elementen um benutzerdefinierte Formen fließen.

shape-outside für Textumfluss ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

CSS-Shapes-Modul

Das CSS-Shapes-Modul ermöglicht es, Text um nicht rechteckige Formen fließen zu lassen. Die wichtigste Eigenschaft ist shape-outside, die die Form definiert, um die der Text herumfließt.

Anforderungen von shape-outside

shape-outside funktioniert nur bei gefloateden Elementen. Das Element muss nach links oder rechts gefloatet sein, damit benachbarter Text um die definierte Form herumfließen kann.

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

Text fließt um einen kreisförmigen Pfad, der relativ zum gefloateten Element definiert ist:

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

Text fließt um einen elliptischen Pfad:

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

Text fließt um einen Polygonpfad – dadurch werden komplexe redaktionelle Layouts möglich:

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

shape-outside mit einem Bild

Übergeben Sie eine URL, um den Alphakanal des Bildes als Formgrenze zu verwenden. Text fließt um die nicht transparenten Bereiche des Bildes:

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

shape-margin fügt einen Abstand zwischen dem shape-outside-Pfad und dem umlaufenden Text hinzu:

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

Wenn Sie ein Bild für shape-outside verwenden, legt shape-image-threshold den Grenzwert für die Alpha-Transparenz (0 bis 1) fest, der die Formgrenze definiert.

Designanwendungen

CSS Shapes ermöglichen redaktionelle Layouts im Magazin-Stil, hervorgehobene Zitate mit einem geformten Bildumlauf und Bereiche für Initialen mit unregelmäßigem Textfluss — Effekte, die zuvor nur im Printdesign oder mit SVG möglich waren.

Browserunterstützung

shape-outside mit grundlegenden Formen (circle, ellipse, polygon, inset) wird von allen modernen Browsern unterstützt. shape-outside mit einer Bild-URL wird breiter unterstützt, die Unterstützung kann jedoch variieren. Testen Sie immer.

Praxisbeispiel: Initiale

Ein dreieckiger Bereich für eine Initiale, um den herum der Text um einen großen dekorativen Buchstaben fließt:

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

Kurzer Test

Was ist erforderlich, damit shape-outside bei einem Element funktioniert?

Zusammenfassung

shape-outside ermöglicht, dass Text um nicht rechteckige Formen fließt, die für schwebende Elemente definiert sind. Formen können Kreise, Ellipsen, Polygone oder Alpha-Kanäle von Bildern sein. Verwenden Sie shape-margin für zusätzlichen Abstand. Kombinieren Sie es mit clip-path, damit das Element visuell zu seiner definierten Form passt.

Häufig gestellte Fragen

Ist die Lektion „shape-outside für Textumfluss“ kostenlos?

Ja — der vollständige Text von „shape-outside für Textumfluss“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „shape-outside für Textumfluss“?

Lassen Sie Text mit shape-outside bei gefloateten Elementen um benutzerdefinierte Formen fließen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „shape-outside für Textumfluss“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu CSS Academy