
Show HN: CSS Filter Effects - naeemnur
http://www.cssreflex.com/css-generators/filter/
======
viggity
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.

------
ErikHuisman
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
Or blur with canvas, so you only do the client-side operation once?

------
Thiz
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.

~~~
nness
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.

------
UUMMUU
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
This could be the new blink tag!

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

------
andrewmu
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.

------
sebnukem2
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.

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

------
atkaye
Small typo on "Hue Roatate" FYI

~~~
naeemnur
Fixed it, thanks!

------
kylelibra
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
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.

------
audessuscest
Is there any difference between opacity and filter: opacity ?

~~~
talmand
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.

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

------
mikkom
Doesn't seem to work with firefox/linux.

~~~
fougerejo
Works on ff 37.0.2

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

~~~
nness
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.

