I've used the filter effects for a lot of really useful applications. I'm always surprised though that sepia is an offered filter. It seems pretty kitsch and not that useful, it is effectively grayscale with an additive color overlay of only one color. I don't mind that it is there, but it doesn't seem like a primitive operation like the rest. Perhaps if you could change the overlay then it'd be a lot more useful.
These css effects are pretty cool. But front-enders beware, they can be supersuper slow when trying to animate or even scroll (especially on mobile). If you want to use blurred images let a server do the burring for you.
Yea, they seem to be too expensive to use for full page effects, but I haven't found them to impact performance if used with parsimony on a few select elements with no children.
“Furthermore, if a shorthand filter expands this visible area like it is the case for <blur()> or <drop-shadow()> the filter region must cover this area as well.”
I had way too much fun sliding the Hue Rotation back and forth to create Disco Kitty. Thanks for sharing, I knew about blur and opacity but the rest of these were new to me.
I'm wondering why the greyscale and saturation filters were both necessary. greyscale(0) == saturation(1.0) and greyscale(1.0) == saturation(0.0), with afaik a linear scaling between either.
These are cool, but seems like in cases where you want to blur something out on an image you should do so in photoshop on the actual image and not with css. Otherwise someone could just use element inspector to delete the blur effect.
In those cases you are correct, but what if you're building a cloud based SAAS that lets users manipulate photos, then save the result? This stuff has a lot of uses.
As far as I know, there's no difference in the outcome. Opacity is handled by most browsers through hardware and I would imagine the filter method does the same. I would hope they are handled the same because it would seem wasteful to have two methods that do the same thing.
Somewhat useless thought, opacity and the opacity filter can be combined on the same element. If one is set to zero it makes the other irrelevant. If one is set to 100% then it makes itself irrelevant.
Could be that the blurring isn't being handled by the GPU. CSS 3D-transforms are usually added as a work-around when we want a smoother performance for certain elements by forcing that extra rendering step.
