HTML + CSSCards

Polaroid que se revela

Una foto instantánea que pasa de mancha oscura a puesta de sol en color al agitarla, con el pie escrito a mano.

Ajustes

Color principal#f29e4c

Color secundario#1f6f8b

Tamaño16px

Velocidad1x

Texto

Código

index.html

<button type="button" class="uvq07-pol" aria-pressed="false"><span class="fr"><span class="ph" aria-hidden="true"><i class="sk"></i><i class="sn"></i><i class="se"></i><i class="sa"></i><i class="dv"></i></span><span class="cp">Cádiz, agosto</span></span><span class="hn"><span class="h1">Pulsa para revelar</span><span class="h2">Pulsa otra vez para repetir</span></span></button>

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 Cards

Ver todos: Cards

Tarjeta con tilt 3D

CardsReact + Motion

Tarjeta con foco de luz

CardsReact + Motion

Widget de tiempo y agenda

CardsReact + Motion

Tarjeta con borde de luz

CardsHTML + CSS

Tarjeta con elevación y zoom

CardsHTML + CSS

Tarjeta que gira en 3D

CardsHTML + CSS

Tarjeta con degradado vivo

CardsHTML + CSS

Tarjeta con contenido oculto

CardsHTML + CSS

Dónde usarlo

Las fotos instantáneas tienen su ritual: agitar, esperar y ver cómo aparece la imagen. Esta tarjeta lo recrea con degradados CSS para la escena de playa, una capa oscura de revelado que se desvanece despacio y un pequeño vaivén al pulsar. Encaja en diarios de viaje, apps de fotos, resúmenes de eventos y portafolios con un toque cálido.

Usa el color principal para el cielo del atardecer y el secundario para el mar, y cambia el pie por un lugar y una fecha. Coloca varias con ángulos distintos para montar un muro tipo álbum.