HTML + CSSOverlays
Banner de anuncio superior
Una franja arriba con un brillo que la recorre, un enlace a la novedad y una X que la pliega.
Ajustes
16px
1x
Código
<div class="uv-oab"><div class="bn" role="region" aria-label="Anuncio"><div class="in"><span class="tg">Nuevo</span><span class="tx">Nuevo: plantillas de facturas con tu logo</span><a href="#">Ver novedades</a><button type="button" class="x" aria-label="Cerrar anuncio"><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></div></div><div class="ap"><div class="nb"><i></i><i></i><i></i></div><div class="pg" aria-hidden="true"><i class="h"></i><i></i><i></i><i></i><i></i><i class="s"></i></div></div><button type="button" class="fire">Mostrar banner</button></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 Overlays
Ver todos: OverlaysDónde usarlo
Lanzamientos, rebajas o cambios de condiciones merecen a menudo una franja fina sobre la navegación en lugar de un popup. Esta usa un degradado entre tus dos colores con un brillo suave que la recorre, una etiqueta Nuevo, el mensaje y un enlace. Al cerrarla, la altura se pliega con suavidad y el contenido sube sin dar un salto; en la demo un botón la vuelve a mostrar.
El pliegue anima las filas del grid, así que funciona con cualquier longitud de mensaje. Guarda que se ha cerrado para que quien vuelva no vea la misma franja otra vez.