HTML + CSSCheckboxes

Página con la esquina doblada

Una página de libro que dobla su esquina al marcarla, como cuando señalas por dónde vas leyendo.

Ajustes

16px
1x

Código

<label class="uvq02-dog"><input type="checkbox"><span class="pg"><span class="ls" aria-hidden="true"><i></i><i></i><i></i><i></i></span><span class="tx">Marcar esta página</span><span class="nm" aria-hidden="true">87</span></span><span class="ea" aria-hidden="true"></span></label>

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 Checkboxes

Ver todos: Checkboxes

Dónde usarlo

Este checkbox es una página de libro entera, con líneas de texto en gris, número de página y una etiqueta. Al marcarlo, la esquina superior derecha se dobla con un muelle y deja ver el dorso de color del papel, la típica oreja que marca una página. Al pasar el ratón la esquina se levanta un poco. Encaja en apps de lectura, marcadores, artículos guardados y herramientas de estudio.

El color principal es el dorso del doblez y el secundario el papel. Una propiedad CSS registrada mueve el pliegue, así que el tamaño y el muelle se ajustan fácil, y varias páginas juntas forman una lista de lectura con vida.