HTML + CSSChamps

Tableau noir à la craie

Zone de texte sur ardoise encadrée de bois : écriture à la craie, couleurs sur le rebord et brosse qui efface tout.

Réglages

16px
1x

Code

<div class="uvq06-ch"><svg class="fx" aria-hidden="true" width="0" height="0"><filter id="uvq06-ch-f"><feTurbulence type="fractalNoise" baseFrequency="1.1" numOctaves="2" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="2"/></filter></svg><div class="bd"><label class="sl"><span class="sr">Écris au tableau</span><textarea rows="4" spellcheck="false" placeholder="Écris au tableau"></textarea></label><span class="er" aria-hidden="true"></span></div><div class="lg"><div class="ck" role="radiogroup" aria-label="Couleur de la craie"><label style="--k:#f4f1e8"><input type="radio" name="uvq06-ch-k"><span class="sr">Blanche</span></label><label style="--k:var(--c1)"><input type="radio" name="uvq06-ch-k"><span class="sr">Couleur principale</span></label><label style="--k:var(--c2)"><input type="radio" name="uvq06-ch-k"><span class="sr">Couleur secondaire</span></label></div><button type="button" class="rb"><span>Effacer</span></button></div></div>

Prompt pour l’IA

Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.

Version Markdown avec tout le code, pour les assistants IA

Plus dans Champs

Voir tout : Champs

Où l’utiliser

Une zone de texte posée sur une ardoise avec cadre et rebord en bois. Un petit filtre de turbulence SVG rend les lettres rugueuses comme de la craie, de légères traces restent sur l'ardoise et les bâtons du rebord sont de vrais boutons radio qui changent la couleur. La brosse en feutre balaie le tableau et laisse un nuage qui s'efface.

Utilise les deux couleurs pour les craies jaune et rose et garde la blanche par défaut. Il convient aux menus de café, aux apps scolaires, aux plats du jour et aux listes de tâches, et trois ou quatre lignes courtes se lisent mieux avec cette écriture.