shape-outside voor tekstomloop
Laat tekst rond aangepaste vormen lopen met shape-outside op gefloatte elementen.
shape-outside voor tekstomloop is een gratis CSS Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
CSS Shapes-module
Met de CSS Shapes-module kun je tekst om niet-rechthoekige vormen heen laten lopen. De belangrijkste eigenschap is shape-outside, die de vorm definieert waar de tekst omheen loopt.
Vereisten voor shape-outside
shape-outside werkt alleen op zwevende elementen. Het element moet zwevend zijn (links of rechts), zodat aangrenzende tekst om de gedefinieerde vorm heen kan lopen.
<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()
Tekst loopt om een cirkelvormig pad heen dat is gedefinieerd ten opzichte van het zwevende element:
<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()
Tekst loopt om een elliptisch pad heen:
<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()
Tekst loopt om een veelhoekig pad heen, waardoor complexe redactionele lay-outs mogelijk zijn:
<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>
shape-outside met een afbeelding
Geef een URL op om het alfakanaal van de afbeelding als grens van de vorm te gebruiken. Tekst loopt om de niet-transparante delen van de afbeelding heen:
<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 voegt ruimte toe tussen het shape-outside-pad en de omringende tekst:
<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
Wanneer je een afbeelding gebruikt voor shape-outside, stelt shape-image-threshold de drempel voor alfatransparantie in (0 tot 1), die de rand van de vorm bepaalt.
Ontwerptoepassingen
Met CSS Shapes maak je redactionele indelingen in tijdschriftstijl, uitgelichte citaten met tekst die om een gevormde afbeelding loopt en gebieden met initialen waarbij de tekst onregelmatig doorloopt — effecten die voorheen alleen mogelijk waren in drukwerkontwerp of met SVG.
Ondersteuning door webbrowsers
shape-outside met basisvormen (circle, ellipse, polygon, inset) wordt door alle moderne webbrowsers ondersteund. shape-outside met een afbeeldings-URL wordt breder ondersteund, maar de ondersteuning kan variëren. Test dit altijd.
Praktijkvoorbeeld: initiaal
Een driehoekig gebied voor een initiaal waarbij de tekst om een grote decoratieve letter loopt:
<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>
Korte controle
Wat is vereist om shape-outside op een element te laten werken?
Samenvatting
Met shape-outside loopt tekst om niet-rechthoekige vormen heen die op zwevende elementen zijn gedefinieerd. Vormen kunnen cirkels, ellipsen, polygonen of alfakanalen van afbeeldingen zijn. Gebruik shape-margin voor extra ruimte. Combineer dit met clip-path om het element visueel te laten overeenkomen met de gedefinieerde vorm.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “shape-outside voor tekstomloop” gratis?
Ja — de volledige tekst van “shape-outside voor tekstomloop” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “shape-outside voor tekstomloop”?
Laat tekst rond aangepaste vormen lopen met shape-outside op gefloatte elementen. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “shape-outside voor tekstomloop”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- clip-path met polygon() en circle()
- shape-outside voor tekstomloop
- clip-path-vormen animeren
- CSS-masks versus clip-path