HTML + CSSOverlays

Hojas apiladas con profundidad

Hojas que se abren una encima de otra: la de atrás se encoge y se oscurece, y Escape solo cierra la de arriba.

Ajustes

16px
1x

Código

<div class="uvq13-stk"><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div><button type="button" class="fire" aria-haspopup="dialog">Ajustes de la cuenta</button><div class="scr"></div><section class="sh" data-i="0" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-0"><i class="gr" aria-hidden="true"></i><header><span></span><b id="uvq13-stk-0">Ajustes de la cuenta</b><button type="button" class="x" aria-label="Cerrar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17"/></svg></button></header><button type="button" class="row" data-to="1"><i class="ic" style="--c:#0ea5e9"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/></svg></i><span>Privacidad</span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><button type="button" class="row"><i class="ic" style="--c:#f43f5e"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9.5a6 6 0 0 1 12 0c0 4.5 2 6 2 6H4s2-1.5 2-6M10 19a2 2 0 0 0 4 0"/></svg></i><span>Notificaciones</span><em>Activadas</em></button><button type="button" class="row"><i class="ic" style="--c:#8b5cf6"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.5 2.6 3.5 5.4 3.5 8.5s-1 5.9-3.5 8.5c-2.5-2.6-3.5-5.4-3.5-8.5s1-5.9 3.5-8.5"/></svg></i><span>Idioma</span><em>Español</em></button></section><section class="sh" data-i="1" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-1"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Atrás"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-1">Privacidad</b><span></span></header><label class="row"><span>Perfil privado</span><input type="checkbox" role="switch" class="sw"></label><button type="button" class="row" data-to="2"><span>Cuentas bloqueadas</span><em>2</em><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></button><p class="nt">Si tu perfil es privado, solo tus seguidores verán lo que publicas.</p></section><section class="sh" data-i="2" role="dialog" aria-modal="true" aria-labelledby="uvq13-stk-2"><i class="gr" aria-hidden="true"></i><header><button type="button" class="bk" aria-label="Atrás"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 6l-6 6 6 6"/></svg></button><b id="uvq13-stk-2">Cuentas bloqueadas</b><span></span></header><ul><li><span class="av" style="--c:#f97316">R</span><span class="nm">rober_88</span><button type="button" class="ub"><span class="a">Desbloquear</span><span class="b">Bloquear</span></button></li><li><span class="av" style="--c:#6366f1">N</span><span class="nm">nube.gris</span><button type="button" class="ub"><span class="a">Desbloquear</span><span class="b">Bloquear</span></button></li></ul></section></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.

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

Más en Overlays

Ver todos: Overlays

Dónde usarlo

Los ajustes suelen tener dos o tres niveles, y las hojas apiladas dejan ver ese camino. Cada hoja nueva sube mientras la anterior se encoge, se eleva un poco y se oscurece, así sabes a qué profundidad estás. Los botones de atrás y Escape quitan una capa cada vez y el foco vuelve a la fila que la abrió. Encaja en ajustes, pasos de compra y filtros.

El color principal rellena el interruptor y los botones de desbloquear, y el texto pone nombre a la primera hoja. Añade filas con data-to apuntando a la siguiente hoja y las reglas de profundidad escalan cada capa solas.