Een portret waar de tekst in een boog omheen loopt in plaats van in een rechthoek, met CSS shape-outside: rond, schuin of gewoon recht ter vergelijking. Voor teampagina's, interviews en artikelen met een foto in de tekst. Op smalle schermen krimpt de foto mee; zonder ondersteuning loopt de tekst gewoon recht langs.
Sanne behandelt bij Fysio Oost in Groningen vooral knie- en schouderklachten. Ze begon als sportverzorger bij een handbalclub en weet dus hoe het is om snel terug te willen. Op dinsdag en donderdag houdt ze een avondspreekuur tot 20.00 uur, voor wie overdag werkt. Nieuwe patiënten kunnen zonder verwijzing van de huisarts bij haar terecht, de eerste afspraak duurt 45 minuten.
<!-- Tekst stroomt om een vorm · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tov">
<fieldset class="tov__opts">
<legend class="tov__sr">Vorm waar de tekst omheen loopt</legend>
<label class="tov__opt"><input class="tov__r" type="radio" name="tov-vorm" value="rond" checked><span>Rond</span></label>
<label class="tov__opt"><input class="tov__r" type="radio" name="tov-vorm" value="schuin"><span>Schuin</span></label>
<label class="tov__opt"><input class="tov__r" type="radio" name="tov-vorm" value="recht"><span>Recht</span></label>
</fieldset>
<article class="tov__art">
<img class="tov__img" src="https://neddev.com/lab-media/tekst-om-vorm-1.webp" alt="Fysiotherapeut Sanne Bakker in de oefenzaal van de praktijk" width="300" height="300" loading="lazy">
<h3 class="tov__h">Sanne Bakker, fysiotherapeut</h3>
<p class="tov__p">Sanne behandelt bij Fysio Oost in Groningen vooral knie- en schouderklachten. Ze begon als sportverzorger bij een handbalclub<span class="tov__y"> en weet dus hoe het is om snel terug te willen</span>.<span class="tov__x"> Op dinsdag en donderdag houdt ze een avondspreekuur tot 20.00 uur, voor wie overdag werkt. Nieuwe patiënten kunnen zonder verwijzing van de huisarts bij haar terecht, de eerste afspraak duurt 45 minuten.</span></p>
</article>
</div>
</div>/* Tekst stroomt om een vorm · NedDev · eigen werk. */
.tov{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:12px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left;overflow:hidden}
.tov__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tov__opts{display:flex;gap:6px;margin:0;padding:0;border:0;min-width:0}
.tov__opt{position:relative;display:inline-flex}
.tov__r{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tov__opt span{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border:1px solid rgba(10,10,10,.2);border-radius:4px;font-size:12.5px;font-weight:500;color:#3a3a3a}
.tov__r:checked+span{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.tov__r:hover+span{border-color:#0a0a0a}
.tov__r:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.tov{container-type:inline-size}
@container (max-width:380px){.tov__x{display:none}.tov__p{font-size:12px;line-height:1.45}}
@container (max-width:330px){.tov__y{display:none}.tov .tov__img{width:84px;height:84px;margin-right:8px}.tov .tov__h{font-size:13px}}
.tov__art{flex:1;min-height:0;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 22px),transparent);mask-image:linear-gradient(#000 calc(100% - 22px),transparent)}
.tov__img{float:left;width:128px;height:128px;margin:2px 12px 0 0;object-fit:cover;border-radius:50%;shape-outside:circle(50%);shape-margin:8px;transition:border-radius .35s ease,clip-path .35s ease}
.tov__h{margin:0 0 4px;font-size:14px;font-weight:700;line-height:1.25}
.tov__p{margin:0;font-size:12.5px;line-height:1.5;color:#2b2b2b}
.tov:has(.tov__r[value="schuin"]:checked) .tov__img{border-radius:4px;clip-path:polygon(0 0,100% 0,62% 100%,0 100%);shape-outside:polygon(0 0,100% 0,62% 100%,0 100%);height:132px}
.tov:has(.tov__r[value="recht"]:checked) .tov__img{border-radius:4px;shape-outside:none}
@media (max-width:420px){.tov__img{width:96px;height:96px}.tov:has(.tov__r[value="schuin"]:checked) .tov__img{height:110px}}
@media (prefers-reduced-motion:reduce){.tov__img{transition:none}}Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →