Show HN: CSS Filter Effects(cssreflex.com)
cssreflex.com
Show HN: CSS Filter Effects
http://www.cssreflex.com/css-generators/filter/
26 comments
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.
Or blur with canvas, so you only do the client-side operation once?
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.
In Safari, the blur effect should not extend over the boundaries of the object.
Is that a bug or a feature?
Btw, there are some interesting ideas for sliding captchas.
Is that a bug or a feature?
Btw, there are some interesting ideas for sliding captchas.
There overflow: hidden; on one of the its parents, so you'd assume that it shouldn't blur outside of the parent container. I'd call that a bug.
[Spec](http://dev.w3.org/fxtf/filters/#filter-region-for-shorthands) hints at this being expected behavior:
“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.”
“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.”
Firefox behaves the same way AFAICT. http://i.imgur.com/YCygCb7.png
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.
This could be the new blink tag!
CSS filters are cool! I also made something similar few months back: http://lalwanivikas.github.io/image-editor/
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.
Now what would be really cool is the ability to define a filter function in JS callable from the CSS. Of course one can do that with canvas.
Cool stuff. Alternatively you could embed images in SVG and apply SVG filters, but it's quite more complicated.
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.
Is there any difference between opacity and filter: opacity ?
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.
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.
Pretty cool.
It's simple way to test effects.
Doesn't seem to work with firefox/linux.
It does. FF 36 on CentOS 6.6.
Works on ff 37.0.2
And on Firefox for Android. Blur is very slow, though.
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.