HTML + CSSCases à cocher

Case à cocher brûleur à gaz

Une plaque vue de dessus : en cochant, le bouton tourne, une étincelle jaillit et une couronne de flammes bleues s'allume.

Réglages

16px
1x

Code

<label class="uvq02-gas"><input type="checkbox"><span class="bn" aria-hidden="true"><span class="gr"></span><span class="fl"><i style="--a:0deg;--i:0"></i><i style="--a:26deg;--i:1"></i><i style="--a:51deg;--i:2"></i><i style="--a:77deg;--i:3"></i><i style="--a:103deg;--i:4"></i><i style="--a:129deg;--i:5"></i><i style="--a:154deg;--i:6"></i><i style="--a:180deg;--i:7"></i><i style="--a:206deg;--i:8"></i><i style="--a:231deg;--i:9"></i><i style="--a:257deg;--i:10"></i><i style="--a:283deg;--i:11"></i><i style="--a:309deg;--i:12"></i><i style="--a:334deg;--i:13"></i></span><span class="cp"></span></span><span class="kn" aria-hidden="true"></span>Allumer le feu</label>

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 Cases à cocher

Voir tout : Cases à cocher

Où l’utiliser

Cette case à cocher est une plaque de cuisson au gaz vue de dessus, avec un plateau en émail noir, une grille en fonte, un chapeau de brûleur et un bouton chromé à côté. En la cochant, le bouton tourne d'un quart de tour vers la gauche, une étincelle jaillit et quatorze flammes bleues s'allument l'une après l'autre, puis vacillent. Elle convient aux applis de cuisine et minuteurs.

La couleur principale est la base de la flamme et le halo, la secondaire les pointes : gaz bleu, feu de bois orange ou flamme verte imaginaire fonctionnent. Avec le mouvement réduit, les flammes restent allumées mais immobiles.