Nuancier de tissus
Des échantillons de tissu crantés avec leur texture : lin, laine, velours côtelé, soie, denim et coton à cocher.
Réglages
Code
<fieldset class="uvq05-fb"><legend>Tissu</legend><div class="gr"><label style="--r:-3deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Lin</span></label><label style="--r:2deg"><input type="checkbox" checked><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Laine</span></label><label style="--r:-2deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Velours côtelé</span></label><label style="--r:3deg"><input type="checkbox" checked><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Soie</span></label><label style="--r:-1deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Denim</span></label><label style="--r:2deg"><input type="checkbox"><span class="sh"><span class="sw"></span><b class="tg" aria-hidden="true"></b></span><span class="nm">Coton</span></label></div><p class="ct"><span>Tissus choisis :</span> <span class="n"></span></p></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 Filtres
Voir tout : FiltresOù l’utiliser
Les boutiques de mode, de tapisserie et de mobilier filtrent souvent par matière, et un échantillon parle mieux qu'un mot. Chaque carré est découpé avec un polygone de ciseaux cranteurs et texturé par des dégradés CSS superposés pour la trame, la maille, les côtes ou le brillant. Les échantillons choisis se soulèvent un peu de biais, montrent une couture et reçoivent une étiquette cochée.
La première couleur marque la coche et les noms choisis, la seconde colore l'étiquette. Ajuste couleurs et dégradés de chaque tissu dans le code selon ton stock et garde des noms courts pour les petits écrans.