¿usar múltiples filtros css al mismo tiempo?

Question

¿usar múltiples filtros css al mismo tiempo?

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 fiddle 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);
}

Cualquier ayuda sería un gran agradecimiento.

41

css css3 css-transforms

Author: René, 2014-12-11

Source

1 answers

score 69 · Accepted Answer

Debido a que es una propiedad llamada filter, cada vez que desee agregarle un estilo, lo sobrescribe.

CSS versión 1

Afortunadamente, puede agregar varios estilos en algunas propiedades como background-image y filter! Para que esto funcione, tendrá que poner todos los estilos de filtro en una propiedad de filtro separada por espacio.

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

CSS versión 2

Una solución alternativa, flexible, sería crear una" sopa div " a propósito y establecer diferentes filtros en el html pila. por ejemplo,

<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

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

Otra solución es CSS vars. Yo no diría que es ideal, pero es un buen experimento. El mayor inconveniente es que necesita declarar muchas variables, tener reglas largas predeterminadas para 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 si usa JavaScript para renderizar los estilos, puede leer los filtros aplicados actuales usando getComputedStyle y agregar más a la mezcla.

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

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

Tal vez en el futuro

Tal vez alguna vez los filtros podrían obtener sus propias propiedades para superar el problema de no poder combinar filtros. Esto podría convertirse en algo así como hacer una forma de mano larga al igual que las propiedades como fondo y relleno tienen:

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