Show HN: CSS Filter Effects • Hacker News Board

Re: Show HN: CSS Filter Effects

#21

Post by andrewmu » Thu, May 07, 2015, 2:52 PM UTC

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.

Re: Show HN: CSS Filter Effects

#22

Post by wmeredith » Thu, May 07, 2015, 3:09 PM UTC

kylelibra wrote: post #20

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.

Re: Show HN: CSS Filter Effects

#23

Post by sebnukem2 » Thu, May 07, 2015, 3:15 PM UTC

mikkom wrote: post #4

Doesn't seem to work with firefox/linux.

It does. FF 36 on CentOS 6.6.

Re: Show HN: CSS Filter Effects

#24

Post by sebnukem2 » Thu, May 07, 2015, 3:16 PM UTC

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.

Re: Show HN: CSS Filter Effects

#25

Post by dschep » Thu, May 07, 2015, 3:19 PM UTC

Thiz wrote: post #14

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.

Firefox behaves the same way AFAICT. http://i.imgur.com/YCygCb7.png

Re: Show HN: CSS Filter Effects

#26

Post by leppr » Thu, May 07, 2015, 5:26 PM UTC

ErikHuisman wrote: post #2

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.

Re: Show HN: CSS Filter Effects

#27

Post by SimeVidas » Fri, May 08, 2015, 12:28 AM UTC

Thiz wrote: post #14

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.

[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 or the filter region must cover this area as well.”