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);
}
Because it's one property named filter
, every time you want to add a style to it you override it.
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);
}
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>
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>
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