Mixin vendor de SISASS para la propiedad backdrop-filter.
Aplica efectos visuales sobre el contenido situado detrás de un elemento, como desenfoque, saturación o contraste. Genera la propiedad con prefijo -webkit- y después agrega la versión estándar.
@mixin backdrop-filter($br);| Parámetro | Tipo | Default | Descripción |
|---|---|---|---|
| br | String | - | Define el valor que se asignará a backdrop-filter. |
En este ejemplo, ambos paneles se colocan sobre un fondo decorativo. El primero usa solo transparencia. El segundo aplica blur(10px) mediante backdrop-filter, por lo que el fondo detrás del panel se suaviza y la diferencia resulta visible.
<div class="backdrop_filter_example">
<div><h3 class="subtitle">Sin backdrop-filter</h3><div class="scene"><div class="panel">Panel</div></div></div>
<div><h3 class="subtitle">backdrop-filter: blur(10px)</h3><div class="scene"><div class="panel blurred">Panel</div></div></div>
</div>