Nuancier de peinture en éventail
Un nuancier de peinture ouvert en éventail : la bande choisie glisse vers l'extérieur et teinte le mur derrière.
Réglages
Code
<fieldset class="uvq04-fan"><legend>Couleur du mur</legend><div class="fn"><label style="--a:-50deg;--c:#c4673f"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Argile</b> R-214</span></span></label><label style="--a:-30deg;--c:#d9a53a"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Moutarde</b> Y-108</span></span></label><label style="--a:-10deg;--c:#8fa98a"><input type="radio" name="uvq04-fan" checked><span class="sw"><span class="nm"><b>Sauge</b> G-322</span></span></label><label style="--a:10deg;--c:#2f6f8f"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Océan</b> B-517</span></span></label><label style="--a:30deg;--c:#6e3a5e"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Prune</b> V-640</span></span></label><label style="--a:50deg;--c:#aab4c0"><input type="radio" name="uvq04-fan"><span class="sw"><span class="nm"><b>Brouillard</b> N-090</span></span></label><i class="rv" aria-hidden="true"></i></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
Six bandes de peinture sont rivetées en bas et s'ouvrent comme un vrai nuancier en éventail. Chaque bande montre trois teintes et un nom avec sa référence. La bande choisie glisse vers l'extérieur selon son propre angle et passe au-dessus des autres, et la carte du fond prend un voile léger de cette couleur, comme un essai sur le mur.
Les couleurs sont dans le style de chaque bande : remplace-les par la palette de ta marque, des tissus ou des teintes de bois. De cinq à sept bandes, l'éventail reste lisible, et les flèches du clavier les parcourent dans l'ordre.