Show HN: CSS Filter Effects

http://www.cssreflex.com/css-generators/filter/

by naeemnur • 11 years ago

63 26 11 years ago

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.

TazeTSchnitzel• 11 years ago

Or blur with canvas, so you only do the client-side operation once?

leppr• 11 years ago

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.

mikkom• 11 years ago

Doesn't seem to work with firefox/linux.

fougerejo• 11 years ago

Works on ff 37.0.2

Brakenshire• 11 years ago

And on Firefox for Android. Blur is very slow, though.

sebnukem22• 11 years ago

It does. FF 36 on CentOS 6.6.

leni536• 11 years ago

Cool stuff. Alternatively you could embed images in SVG and apply SVG filters, but it's quite more complicated.

audessuscest• 11 years ago

Is there any difference between opacity and filter: opacity ?

talmand• 11 years ago

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.

atkaye• 11 years ago

Small typo on "Hue Roatate" FYI

naeemnur• 11 years ago

Fixed it, thanks!

UUMMUU• 11 years ago

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.

monk_e_boy• 11 years ago

This could be the new blink tag!

polygonplanet• 11 years ago

Pretty cool. It's simple way to test effects.

Thiz• 11 years ago

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.

nness2• 11 years ago

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.

dschep• 11 years ago

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

SimeVidas• 11 years ago

[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.”

viggity• 11 years ago

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.

lalwanivikas• 11 years ago

CSS filters are cool! I also made something similar few months back: http://lalwanivikas.github.io/image-editor/

kylelibra• 11 years ago

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.

wmeredith• 11 years ago

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.

andrewmu• 11 years ago

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.

sebnukem22• 11 years ago

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.

Show HN: CSS Filter Effects

Related Stories