filter (_vendor.scscs)

Tipo: Mixin

Versión: 2.x.x

Mixin vendor de SISASS para la propiedad filter.

Aplica efectos visuales directamente sobre el propio elemento, como desenfoque, escala de grises o saturación. Genera la propiedad con prefijo -webkit- y después agrega la versión estándar.

Interface 

@mixin filter($br: none);

Parámetros secuenciales

Parámetro Tipo Default Descripción
br String none Define el valor que se asignará a filter.

Ejemplo

En este ejemplo, ambas tarjetas usan la misma imagen. La primera se muestra sin alteraciones. La segunda aplica grayscale(100%), por lo que la imagen pierde su color y el efecto se distingue con facilidad.

Sin filter

Ejemplo sin filter

filter: grayscale(100%)

Ejemplo con filter 

            


            

                

            


            

                
<div class="filter_example">
    <div><h3 class="subtitle">Sin filter</h3><img class="img" src="../assets/img/test/1.webp" alt="Ejemplo sin filter"></div>
    <div><h3 class="subtitle">filter: grayscale(100%)</h3><img class="img grayscale" src="../assets/img/test/1.webp" alt="Ejemplo con filter"></div>
</div>