Kop in twee tonen Nieuw
Kop waarvan de tweede zin een tweede toon krijgt: grijs, cursieve serif of accentkleur, met een korte intro (eerste zin, daarna de tweede). Pure CSS met :has() op de keuzerondjes. Contrast: grijs en oranje alleen op koppen vanaf 24 px (dan geldt AA 3:1); grijs #6b665f haalt 5,1:1 op wit en mag dus ook kleiner, oranje #F5480F haalt 3,2:1 en is alleen voor grote tekst.
Wij regelen de vergunning. Jij kiest alleen de tegels.
Badkamerspecialist Ouwehand · Leiden en omstreken
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.
- Geen JavaScript nodig.
<!-- Kop in twee tonen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="tko">
<fieldset class="tko__opts"><legend class="tko__lg">Tweede toon</legend>
<label><input type="radio" name="tko-v" value="grijs" checked><span>Grijs</span></label>
<label><input type="radio" name="tko-v" value="serif"><span>Cursief</span></label>
<label><input type="radio" name="tko-v" value="accent"><span>Accent</span></label>
</fieldset>
<h4 class="tko__h"><span class="tko__a">Wij regelen de vergunning.</span> <span class="tko__b">Jij kiest alleen de tegels.</span></h4>
<p class="tko__sub">Badkamerspecialist Ouwehand · Leiden en omstreken</p>
</div>
</div>/* Kop in twee tonen · NedDev · eigen werk. */
/* fonts (Fontshare): gambetta@401 */
.tko{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:16px 22px;background:#fff;color:#0a0a0a;font-family:'Switzer',system-ui,sans-serif;container-type:inline-size}
.tko__opts{display:flex;gap:4px;margin:0;padding:3px;border:1px solid #dcd8d2;border-radius:999px;align-self:flex-start;background:#f4f3f1}
.tko__lg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tko__opts label{position:relative;cursor:pointer}
.tko__opts input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tko__opts span{display:block;padding:6px 11px;border-radius:999px;font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5f5a54;transition:background-color .16s,color .16s}
.tko__opts input:checked+span{background:#0a0a0a;color:#fff}
.tko__opts input:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.tko__h{margin:0;font:700 clamp(24px,7.2cqi,36px)/1.08 'Switzer',sans-serif;letter-spacing:-.035em;max-width:15em;text-wrap:balance}
.tko__a,.tko__b{display:inline}
.tko__b{color:#6b665f;transition:color .3s}
.tko:has(input[value="serif"]:checked) .tko__b{color:#0a0a0a;font-family:'Gambetta',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em}
.tko:has(input[value="accent"]:checked) .tko__b{color:#F5480F}
.tko__sub{margin:0;font:500 10.5px 'JetBrains Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#5f5a54}
@media (prefers-reduced-motion:no-preference){
.tko__a,.tko__b{display:inline-block;animation:tko-in .6s cubic-bezier(.2,.7,.2,1) both}
.tko__b{animation-delay:.18s}
.tko:has(input[value="serif"]:checked) .tko__b{animation-name:tko-in2}
.tko:has(input[value="accent"]:checked) .tko__b{animation-name:tko-in3}
}
@keyframes tko-in{from{opacity:0;transform:translateY(.25em)}}
@keyframes tko-in2{from{opacity:0;transform:translateY(.25em)}}
@keyframes tko-in3{from{opacity:0;transform:translateY(.25em)}}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 →