color - usa múltiples filtros css al mismo tiempo?

html filter

Question

Estoy experimentando con filtros CSS.

Y me gustaría usar el desenfoque y la escala de grises al mismo tiempo, pero parece que no puedo usar ambos simultáneamente en la misma imagen.

Ver violín aquí ...

http://jsfiddle.net/joshmoto/fw0m9fzu/1/

.blur {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
}

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
}

.blur-grayscale {
    filter: blur(5px) grayscale(1);
    -webkit-filter: blur(5px) grayscale(1);
    -moz-filter: blur(5px) grayscale(1);
    -o-filter: blur(5px) grayscale(1);
    -ms-filter: blur(5px) grayscale(1);
}

Answer 1

Debido a que es una propiedad llamada filter , cada vez que desea agregarle un estilo, la anula.

CSS versión 1

Afortunadamente, puede agregar varios estilos en algunas propiedades, como imagen de fondo y filtro. Para que esto funcione, deberá colocar todos los estilos de filtro en una propiedad de filtro separada por espacios.

.grayscale.blur {
    filter: blur(5px) grayscale(1);
}

CSS versión 2

Una solución alternativa y flexible sería crear una "sopa div" a propósito y establecer diferentes filtros en la pila html. p.ej

<div class=''demo__blurwrap'' style=''filter: blur(5px);''>
    <div class="demo__graywrap" style=''filter: grayscale(1);''>
        <img src="awesome_image.jpeg" alt="">
    </div>
</div>

CSS versión 3

editar : me acabo de dar cuenta de que acabo de escribir esta versión con transformaciones, pero se aplica la misma idea.

Otra solución es CSS vars. No diría que es ideal, pero es un buen experimento. El principal inconveniente es que debe declarar muchas variables, tener reglas largas predeterminadas para la transform y las transformaciones anidadas definitivamente se romperán.

// Added just for fun
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle(''translate'');
}, 1000);
setInterval(() => {
  yes_this_works_and_one_of_many_reasons_ids_are_bad.classList.toggle(''scale'');
}, 1500);

:root {
  --scale: 1;
  --translate: 0px;
}
.box {
  background: blue;
  width: 20px;
  height: 20px;
  transform: 
    scale(var(--scale))
    translate(var(--translate), var(--translate));
  transition: transform .3s;
}
.box.translate {
  --translate: 20px;
}
.box.scale {
  --scale: 3;
}

<div 
  id=''yes_this_works_and_one_of_many_reasons_ids_are_bad'' 
  class=''box scale translate''
></div>

Javascript

Por último, si usa JavaScript para representar los estilos, puede leer los filtros aplicados actuales usando getComputedStyle y agregar más a la mezcla.

• Estilos de configuración de demostración de navegador modernos muy bien
• Estilos de configuración de demostración de navegador modernos sin respeto y corríjalos con observadores

Y un artículo relevante: esto es más para animaciones y aún no es compatible con muchos navegadores: animaciones aditivas

Y otro artículo relevante sobre css-tricks: Houdini

Quizás en el futuro

Tal vez los filtros puedan tener sus propias propiedades para superar el problema de no poder combinar filtros. Esto podría convertirse en algo así como hacer un formulario de forma manual al igual que las propiedades que tienen el fondo y el relleno:

// NON STANDARD, will not work
.grayscale {
    filter-grayscale: 1;
}
.blur {
    filter-blur: 5px;
}