Kop in twee tonen New
A heading whose second sentence gets a second tone: grey, italic serif or accent colour, with a short intro (first sentence, then the second). Pure CSS with :has() on the radio buttons. Contrast: grey and orange only on headings from 24 px (AA 3:1 applies); grey #6b665f reaches 5.1:1 on white so can go smaller, orange #F5480F reaches 3.2:1 and is for large text only.
Wij regelen de vergunning. Jij kiest alleen de tegels.
Badkamerspecialist Ouwehand · Leiden en omstreken
How to use it
- Paste the HTML where the text animations should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- 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)}}More text animations
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →