Koppen zonder weeswoord Nieuw
Laat zien wat text-wrap: balance en pretty doen: de kop verdeelt zijn woorden over gelijke regels en de alinea eindigt niet met één los woord. Sleep de kolombreedte en zet het aan of uit om het verschil te zien. Eén regel CSS voor elke kop en intro op een site; browsers zonder ondersteuning breken gewoon af zoals altijd.
Zonnepanelen laten leggen in Haarlem en omgeving
Wij leggen uw panelen binnen drie weken na akkoord, inclusief omvormer, schouw op het dak en aanmelding bij de netbeheerder.
Zo gebruik je het
- Plak de HTML op de plek waar het onderdeel moet komen.
- Zet de CSS in je stylesheet. Alle klassen hebben een eigen voorvoegsel, dus niets botst met je eigen opmaak.
- Voeg de JavaScript toe en roep init() aan met het element waar de HTML in staat.
<!-- Koppen zonder weeswoord · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="kzw">
<div class="kzw__bar">
<label class="kzw__sw"><input class="kzw__cb" type="checkbox" role="switch" checked><span class="kzw__spoor" aria-hidden="true"></span><span>Slim afbreken</span></label>
<label class="kzw__br"><span>Breedte</span><input class="kzw__range" type="range" min="50" max="100" value="80" aria-valuetext="80 procent"></label>
</div>
<div class="kzw__vak">
<div class="kzw__kol">
<h3 class="kzw__h">Zonnepanelen laten leggen in Haarlem en omgeving</h3>
<p class="kzw__p">Wij leggen uw panelen binnen drie weken na akkoord, inclusief omvormer, schouw op het dak en aanmelding bij de netbeheerder.</p>
</div>
</div>
</div>
</div>/* Koppen zonder weeswoord · NedDev · eigen werk. */
.kzw{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;padding:12px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left}
.kzw__bar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.kzw__sw{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:28px;font-size:12.5px;font-weight:500;cursor:pointer}
.kzw__cb{position:absolute;opacity:0;width:36px;height:24px;margin:0;left:0;cursor:pointer}
.kzw__spoor{position:relative;width:36px;height:20px;border-radius:4px;background:#cfcdc9;transition:background-color .2s}
.kzw__spoor::after{content:'';position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:3px;background:#fff;transition:transform .2s}
.kzw__cb:checked+.kzw__spoor{background:#0a0a0a}
.kzw__cb:checked+.kzw__spoor::after{transform:translateX(16px)}
.kzw__cb:focus-visible+.kzw__spoor{outline:2px solid #F5480F;outline-offset:2px}
.kzw__br{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500}
.kzw__range{width:96px;min-height:24px;accent-color:#F5480F}
.kzw__range:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.kzw__vak{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:safe center;padding:6px 0;border-top:1px solid rgba(10,10,10,.12)}
.kzw__kol{width:var(--b,80%);padding-right:8px;border-right:2px dashed #F5480F}
.kzw__h{margin:0 0 6px;font-size:clamp(17px,5cqw,22px);font-weight:700;line-height:1.2;letter-spacing:-.015em}
.kzw{container-type:inline-size}
.kzw__p{margin:0;font-size:12.5px;line-height:1.45;color:#3a3a3a}
.kzw:has(.kzw__cb:checked) .kzw__h{text-wrap:balance}
.kzw:has(.kzw__cb:checked) .kzw__p{text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.kzw__spoor,.kzw__spoor::after{transition:none}}// Koppen zonder weeswoord · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
const w = root.querySelector('.kzw'); if (!w) return;
const r = w.querySelector('.kzw__range'), kol = w.querySelector('.kzw__kol');
const zet = () => { kol.style.setProperty('--b', r.value + '%'); r.setAttribute('aria-valuetext', r.value + ' procent'); };
r.addEventListener('input', zet); zet();
}
init(document.querySelector('.jouw-container'));Meer uit tekstanimaties
Iets gezien dat je mooi vindt?
Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →