1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas maskoverlayutility

Backdrop Mask

Máscara de desenfoque de fondo para concentrar la atención en el elemento central.

Backdrop Blur

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { BackdropMask } from 'astro-component-kit';
---

<BackdropBlurMask>Content</BackdropBlurMask>
--- import { BackdropMask } from 'astro-component-kit'; --- <BackdropBlurMask>Content</BackdropBlurMask>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/BackdropMask.astro:

astro 
---
---
<div class="mask"></div>
<style>
  .mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 500; pointer-events: none; }
</style>
--- --- <div class="mask"></div> <style> .mask { position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); z-index: 500; pointer-events: none; } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
BackdropMask.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
maskoverlayutility