Estantería que se ordena sola
Libros en una balda que dan un saltito y se recolocan por altura, color o año cuando cambias el orden.
Ajustes
Código
<div class="uvq05-sh"><div class="hd"><span class="lb">Ordenar por</span><div class="sg" role="radiogroup" aria-label="Ordenar por"><label><input type="radio" name="uvq05-sh" checked><span>Altura</span></label><label><input type="radio" name="uvq05-sh"><span>Color</span></label><label><input type="radio" name="uvq05-sh"><span>Año</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 para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Filtros
Ver todos: FiltrosDónde usarlo
Los menús de orden suelen limitarse a reordenar una lista, pero aquí los elementos son objetos: ocho libros en una balda de madera con bandas doradas y el año en el lomo. Cada opción guarda posiciones calculadas de antemano en variables CSS, así que los libros se deslizan a su sitio con un saltito y sin JavaScript. Una maceta acompaña a la balda.
El primer color define la balda y la opción activa, y el segundo la planta. Cambia los libros por tus propios elementos y recalcula los tres juegos de posiciones, o añade un cuarto orden, como por título, ampliando las variables.