web-dev-qa-db-fra.com

utiliser plusieurs filtres CSS en même temps?

J'expérimente avec les filtres CSS.

Et j'aimerais utiliser le flou et les niveaux de gris en même temps, mais je n'arrive pas à utiliser les deux simultanément sur la même image?

Voir le violon ici ...

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);
}
csscss3css-transforms
55
joshmoto

Comme il s’agit d’une propriété nommée filter, chaque fois que vous souhaitez y ajouter un style, vous le remplacez.

CSS version 1

Heureusement, vous pouvez ajouter plusieurs styles dans certaines propriétés, telles que background-image et filter! Pour que cela fonctionne, vous devez mettre tous les styles de filtre dans une propriété de filtre séparée par un espace.

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

CSS version 2

Une solution alternative flexible serait de créer exprès une "soupe div" et de définir différents filtres dans la pile HTML. par exemple.

<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 version 3

edit : je viens de réaliser que je viens d'écrire cette version avec des transformations, mais la même idée s'applique.

Une autre solution est CSS vars. Je ne dirais pas que c'est idéal mais c'est une belle expérience. L'inconvénient majeur est que vous devez déclarer un grand nombre de variables, avoir des règles longues par défaut pour transform et les transformations imbriquées vont définitivement casser.

// 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

Enfin, si vous utilisez JavaScript pour restituer les styles, vous pouvez lire les filtres appliqués actuels à l'aide de getComputedStyle et en ajouter d'autres.

Et un article pertinent - il s’agit plutôt d’animations qui ne sont pas encore supportées par de nombreux navigateurs: animations additives

Et un autre article pertinent sur les astuces css: Houdini

Peut-être à l'avenir

Peut-être que jamais les filtres pourraient avoir leurs propres propriétés pour surmonter le problème de l'impossibilité de combiner les filtres. Cela pourrait ressembler à la création d’une forme longue, tout comme les propriétés de fond et de remplissage:

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