Taille de la tasse de café
Trois verres de tailles différentes : celui qui est choisi se remplit de café et de mousse puis se met à fumer.
Réglages
Code
<fieldset class="uvq04-cup"><legend>Taille</legend><div class="op"><label style="--k:0.78"><input type="radio" name="uvq04-cup"><span class="gl" aria-hidden="true"><span class="st"><i></i><i></i><i></i></span><span class="cp"></span></span><span class="nm">Petit</span><small>250 ml · 2,20 €</small></label><label style="--k:0.9"><input type="radio" name="uvq04-cup" checked><span class="gl" aria-hidden="true"><span class="st"><i></i><i></i><i></i></span><span class="cp"></span></span><span class="nm">Moyen</span><small>350 ml · 2,80 €</small></label><label style="--k:1.04"><input type="radio" name="uvq04-cup"><span class="gl" aria-hidden="true"><span class="st"><i></i><i></i><i></i></span><span class="cp"></span></span><span class="nm">Grand</span><small>470 ml · 3,30 €</small></label></div></fieldset>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.
Plus dans Boutons radio
Voir tout : Boutons radioOù l’utiliser
Trois verres transparents posés sur un comptoir servent de choix de taille pour la carte d'un café. Le verre choisi se remplit par le bas de café, d'une bande de crema plus foncée et de mousse de lait, puis de fines volutes de vapeur montent, pendant que les autres se vident. Verre, liquide et vapeur sont en CSS, idéal pour les applis de commande et les bornes.
La couleur principale est le café et la secondaire la mousse : thé, matcha ou jus deviennent des variantes faciles. Change les noms, volumes et prix dans les libellés, et garde trois ou quatre tailles pour que l'écart reste lisible.