Étagère qui se range toute seule
Des livres sur une étagère sautillent et se replacent par hauteur, couleur ou année quand tu changes l'ordre de tri.
Réglages
Code
<div class="uvq05-sh"><div class="hd"><span class="lb">Trier par</span><div class="sg" role="radiogroup" aria-label="Trier par"><label><input type="radio" name="uvq05-sh" checked><span>Hauteur</span></label><label><input type="radio" name="uvq05-sh"><span>Couleur</span></label><label><input type="radio" name="uvq05-sh"><span>Année</span></label></div></div><div class="sf" aria-hidden="true"><i class="bk" style="--h:5.2em;--w:1.1em;--b:#c0392b;--x0:2.34em;--x1:0em;--x2:3.56em;--d:0"><b>1987</b></i><i class="bk" style="--h:4.2em;--w:0.9em;--b:#2e86ab;--x0:7.02em;--x1:5.6em;--x2:5.9em;--d:1"><b>2004</b></i><i class="bk" style="--h:6em;--w:1.3em;--b:#1e3d59;--x0:0em;--x1:6.62em;--x2:0em;--d:2"><b>1952</b></i><i class="bk" style="--h:4.8em;--w:1em;--b:#f2a541;--x0:4.68em;--x1:2.34em;--x2:8.24em;--d:3;--t:#3a2a10"><b>2019</b></i><i class="bk" style="--h:5.6em;--w:0.8em;--b:#3c896d;--x0:1.42em;--x1:3.46em;--x2:2.64em;--d:4"><b>1971</b></i><i class="bk" style="--h:3.8em;--w:1.2em;--b:#9b5de5;--x0:8.04em;--x1:8.04em;--x2:6.92em;--d:5"><b>2011</b></i><i class="bk" style="--h:5em;--w:1em;--b:#e76f51;--x0:3.56em;--x1:1.22em;--x2:4.78em;--d:6"><b>1999</b></i><i class="bk" style="--h:4.4em;--w:1.1em;--b:#264653;--x0:5.8em;--x1:4.38em;--x2:1.42em;--d:7"><b>1963</b></i><span class="pt"><i></i><i></i><i></i></span></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.
Plus dans Filtres
Voir tout : FiltresOù l’utiliser
Les menus de tri se contentent souvent de réordonner une liste, mais ici les éléments sont des objets : huit livres sur une planche en bois avec bandes dorées et année au dos. Chaque option stocke des positions calculées à l'avance dans des variables CSS, et les livres glissent à leur place avec un petit saut, sans JavaScript. Une plante en pot tient compagnie à l'étagère.
La première couleur règle la planche et l'option active, la seconde la plante. Remplace les livres par tes propres éléments et recalcule les trois jeux de positions, ou ajoute un quatrième ordre, par titre par exemple, en prolongeant les variables.