Huerto urbano
Tomates en un balcón
Un balcón de dos metros basta para cultivar tomates, albahaca y fresas si recibe seis horas de sol al día.
Leer la guía completaTamaño del texto
HTML + CSSOverlays
Schwebendes Barrierefreiheits-Panel
Ein schwebender Button öffnet Einstellungen für Schriftgröße, Kontrast, Unterstreichung, Abstände und Leselinie, die sofort wirken.
Einstellungen
16px
1x
Code
<div class="uvq13-a11y"><article class="art"><p class="kk">Stadtgarten</p><h4>Tomaten auf dem Balkon</h4><p class="tx">Ein zwei Meter breiter Balkon reicht für Tomaten, Basilikum und Erdbeeren, wenn er sechs Stunden Sonne am Tag bekommt.</p><a href="#">Ganzen Ratgeber lesen</a><i class="im" aria-hidden="true"></i></article><i class="rg" aria-hidden="true"></i><button type="button" class="fire" aria-haspopup="dialog" aria-label="Optionen für Barrierefreiheit"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="4.5" r="1.8"/><path d="M5 8.5l7 1.5 7-1.5M12 10v4.5M12 14.5l-3 6M12 14.5l3 6"/></svg></button><div class="pn" role="dialog" aria-modal="true" aria-labelledby="uvq13-a11y-t"><header><b id="uvq13-a11y-t">Barrierefreiheit</b><button type="button" class="x" aria-label="Schließen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><div class="row"><span>Schriftgröße</span><span class="stp"><button type="button" class="dn" aria-label="Text verkleinern">A−</button><output>100 %</output><button type="button" class="up" aria-label="Text vergrößern">A+</button></span></div><button type="button" class="row sw" role="switch" aria-checked="false" data-k="hc"><span>Hoher Kontrast</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="ul"><span>Links unterstreichen</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="sp"><span>Größerer Abstand</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="gd"><span>Leselinie</span><i></i></button><button type="button" class="row sw" role="switch" aria-checked="false" data-k="pa"><span>Animationen anhalten</span><i></i></button><button type="button" class="rs">Zurücksetzen</button></div></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Overlays
Alle ansehen: OverlaysWofür du ihn nutzen kannst
Manche Seiten brauchen Lesehilfen direkt auf der Seite, und dieses Widget hält sie einen Tipp entfernt. Der runde Button öffnet ein Panel mit Schriftgröße und Schaltern für hohen Kontrast, unterstrichene Links, mehr Abstand, eine Leselinie, die dem Zeiger folgt, und angehaltene Animationen. Jede Änderung wirkt live auf den Artikel dahinter. Passt zu Behörden, Schulen, Nachrichtenseiten und langen Texten.
Die Hauptfarbe ist der Button und die aktiven Schalter, die zweite das Band der Leselinie. Jeder Schalter setzt eine Klasse auf das Wurzelelement, an die du eigene Stile hängen kannst, und Zurücksetzen stellt alles wieder her.