csscss-transforms

use multiple css filters at the same time?


I am experimenting with css filters.

And I would like use the blur and grayscale at the same time, but I can't seem to use both simultaneously on the same image?

See fiddle here...

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

Solution

  • Because it's one property named filter, every time you want to add a style to it you override it.

    CSS version 1

    Fortunately you can add multiple styles in some properties like background-image and filter! To get this working you'll have to put all the filter styles in one space separated filter property.

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

    CSS version 2

    An alternative, flexible, solution would be to create a "div soup" on purpose and set different filters in the html stack. e.g.

    <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: just realised I just wrote this version with transforms, but the same idea applies.

    Yet another solution is CSS vars. I wouldn't say it's ideal but it's a nice experiment. The major downside is that you need to declare a lot of variables, have default long rules for transform and nested transforms will definitely break.

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

    Lastly, if you were to use JavaScript to render the styles you can read the current applied filters using getComputedStyle and add more to the mix.

    And a relevant article - this is more for animations and not yet supported by many browsers: Additive animations

    And another relevant article on css-tricks: Houdini