Grote beginletter (drop cap) voor blog en kennisbank in drie vormen: verzonken over drie regels, verhoogd boven de tekst en in een kader. Gebruikt CSS initial-letter waar de browser het kent en valt anders terug op een zwevende letter; de letter blijft gewone tekst voor schermlezers en zoekmachines.
Gras dat in juli bruin kleurt is meestal niet dood. Het gaat in rust en komt na een paar flinke buien vanzelf terug. Sproeien? Doe het twee keer per week grondig in plaats van elke avond een beetje, dan groeien de wortels dieper.
<!-- Initiaal voor artikelen · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="ini">
<fieldset class="ini__opts">
<legend class="ini__sr">Vorm van de beginletter</legend>
<label class="ini__opt"><input class="ini__r" type="radio" name="ini-vorm" value="verzonken" checked><span>Verzonken</span></label>
<label class="ini__opt"><input class="ini__r" type="radio" name="ini-vorm" value="verhoogd"><span>Verhoogd</span></label>
<label class="ini__opt"><input class="ini__r" type="radio" name="ini-vorm" value="kader"><span>In kader</span></label>
</fieldset>
<article class="ini__art">
<h3 class="ini__h">Een groen gazon in een droge zomer</h3>
<p class="ini__p">Gras dat in juli bruin kleurt is meestal niet dood.<span class="ini__y"> Het gaat in rust en komt na een paar flinke buien vanzelf terug.</span> Sproeien? Doe het twee keer per week grondig<span class="ini__x"> in plaats van elke avond een beetje</span>, dan groeien de wortels dieper.</p>
</article>
</div>
</div>/* Initiaal voor artikelen · NedDev · eigen werk. */
.ini{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:safe center;gap:8px;padding:12px 18px;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;background:#fff;text-align:left;overflow:hidden}
.ini__sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ini__opts{display:flex;gap:6px;margin:0;padding:0;border:0;min-width:0}
.ini__opt{position:relative;display:inline-flex}
.ini__r{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.ini__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;transition:background-color .15s,color .15s,border-color .15s}
.ini__r:checked+span{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
.ini__r:hover+span{border-color:#0a0a0a}
.ini__r:focus-visible+span{outline:2px solid #F5480F;outline-offset:2px}
.ini__art{min-width:0}
.ini{container-type:inline-size}
@container (max-width:380px){.ini__x{display:none}}
@container (max-width:330px){.ini__y{display:none}}
.ini__h{margin:0 0 5px;font-size:15px;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.ini__p{margin:0;font-size:13px;line-height:1.5;color:#2b2b2b}
.ini__p::first-letter{float:left;font-weight:800;color:#F5480F;font-size:3.55em;line-height:.82;margin:.05em .1em 0 0}
@supports (initial-letter:3) or (-webkit-initial-letter:3){.ini__p::first-letter{float:none;font-size:inherit;line-height:inherit;margin:0 .14em 0 0;-webkit-initial-letter:3;initial-letter:3}}
.ini:has(.ini__r[value="verhoogd"]:checked) .ini__p::first-letter{float:none;font-size:2.6em;line-height:1;margin:0 .04em 0 0;-webkit-initial-letter:normal;initial-letter:normal}
@supports (initial-letter:3 1) or (-webkit-initial-letter:3 1){.ini:has(.ini__r[value="verhoogd"]:checked) .ini__p::first-letter{font-size:inherit;-webkit-initial-letter:3 1;initial-letter:3 1;margin:0 .06em 0 0}}
.ini:has(.ini__r[value="kader"]:checked) .ini__p::first-letter{float:left;-webkit-initial-letter:normal;initial-letter:normal;font-size:2.7em;line-height:1;padding:.06em .18em .1em;margin:.12em .16em 0 0;background:#0a0a0a;color:#fff;border-radius:4px}
@media (prefers-reduced-motion:reduce){.ini__opt span{transition:none}}Zet het in je selectie en stuur hem op. Dan bouwen we je site eromheen, in jouw huisstijl.
Neem contact op →