Materias

Cajones abiertos:

HTML + CSSFiltros

Fichero de biblioteca

Un mueble fichero de madera donde cada materia es un cajón con tirador de latón que se abre al marcarla.

Ajustes

16px
1x

Código

<fieldset class="uvq05-cc"><legend>Materias</legend><div class="cab"><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Arte</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox" checked><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Ciencia</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Historia</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Poesía</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox" checked><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Viajes</span><i class="pl" aria-hidden="true"></i></span></span></label><label><input type="checkbox"><span class="dw"><span class="cards" aria-hidden="true"></span><span class="fr"><span class="tag">Cocina</span><i class="pl" aria-hidden="true"></i></span></span></label></div><p class="ct"><span>Cajones abiertos:</span> <span class="n"></span></p></fieldset>

Prompt para IA

Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.

Versión Markdown con todo el código, para asistentes de IA

Más en Filtros

Ver todos: Filtros

Dónde usarlo

Los ficheros de las bibliotecas fueron el primer filtro: un cajón por materia lleno de fichas. Aquí cada cajón es una casilla con su etiqueta a máquina en un marco de latón, y al marcarla el cajón sale hacia delante y deja ver las fichas. La veta de la madera es solo degradados CSS. Encaja en librerías, archivos, catálogos de cursos y apps de lectura.

Usa el primer color para los herrajes de latón y el segundo para la madera, de roble claro a nogal. Deja las etiquetas en una palabra corta y acompaña el mueble de una lista que agrupe los resultados por cajones abiertos.